通过前端jq插件 infinite-scroll 实现ajax瀑布流加载

ajax瀑布流加载方案  有两种 一种是官方提供的

https://www.xunruicms.com/doc/534.html

另外一种便是通过我这种前端 jq插件 实现的 下面说方法

列表的调用案例

<ul class="listbox">  class="listbox" 对应下面的 container: ".listbox",

  {list action=module module=news page=1 pagesize=10  urlrule=index.php?page=[page]} 

    <li class="item">{$t.title}</li>  class="item" 对应下面的 item: ".item",

  {/list}

</ul>

<div class="pagelist"> {$pages} </div> class="pagelist" 对应下面的 pagination: ".pagelist",

下载 jq插件 infinite-scroll （在下面附件下载） 代码放在list循环之后

<script src="/static/default/ajax/js/jquery-ias.min.js" type="text/javascript"></script>     

<!-- 在此之前必须先加载jq库以及infinite-scroll插件 路径别错了 没有加载jq就用不了 -->    

<script type="text/javascript">     

var ias = $.ias({    

container: ".listbox", //包含所有文章的元素    

item: ".item", //对应的每篇文章元素    

pagination: ".pagelist", //对应下面的分页元素    

next: " .pagelist a[rel^=next] ", //下一页元素        

//分页里面 下一页带了 rel="next" 所以这个是获取.pagelist类下面的rel元素next的    

});    

ias.extension(new IASSpinnerExtension({    

src: "/static/default/ajax/img/load.gif",    

html: '<p style="text-align: center;"><img src="{src}"/></p>'    

}));    

ias.extension(new IASTriggerExtension({    

text: '点击加载更多', //此选项为需要点击时的文字    

html: '<p style="text-align: center; cursor: pointer;"><a>{text}</a></p>',    

offset: 2, //设置此项后，到 offset:2 页之后需要手动点击才能加载，offset:!1 则一直为无限加载    

}));    

ias.extension(new IASNoneLeftExtension({    

text: '已经加载完成！', // 加载完成时的提示    

html: '<p style="text-align: center; cursor: pointer;"><a>{text}</a></p>',    

}));    

</script>

至此已经完成 案例请查看  http://poscms4.ew98.com/wenzhang

代码下载也可以自行百度下载

ajax