1. 瀑布流布局jquery特效代碼怎麼用
樓主您好
引入infinitescroll
頁面元素
<div data-am-widget="list_news" class="am-list-news am-list-news-default" style="margin:0px 10px 0px 10px;">
<!--列表標題-->
<div class="am-list-news-bd">
<ul class="am-list block" id="container"></ul>
</div>
</div>
<div class="loading" style="text-align:center;">
</div>
<div id="navigation">
<a></a>
</div>
初始化
var navigationUrl = "xxxx?pageNo=1";
$("#navigation a").attr("href", navigationUrl);
$.ajax({
url: 'xxxx',
type: 'post',
dataType:'json',
success: function(items) {
var html = successCallBack(items);//渲染每一個瀑布流塊
$('#container').html(html);
},
error: function() {
alert('載入失敗');
}
});
初始化方法調用
$('#container').infinitescroll({
navSelector : "#navigation", //導航的選擇器，會被隱藏
nextSelector : "#navigation a", //包含下一頁鏈接的選擇器
itemSelector : ".block", //你將要取回的選項(內容塊)
debug : true, //啟用調試信息
animate : true, //當有新數據載入進來的時候，頁面是否有動畫效果，默認沒有
extraScrollPx : 150, //滾動條距離底部多少像素的時候開始載入，默認150
bufferPx : 40, //載入信息的顯示時間，時間越大，載入信息顯示時間越短
errorCallback : function() {
//alert('error');
}, //當出錯的時候，比如404頁面的時候執行的函數
localMode : true, //是否允許載入具有相同函數的頁面，默認為false
dataType : 'json',//可以是json
template: function(items) {
itemsTemp = items;
return successCallBack(items);
},
loading : {
img: '${ctx}/images/loading.gif',
msgText : "載入中...",
finishedMsg : '沒有新數據了...',
selector : '.loading' // 顯示loading信息的div
}
}, function() {
});