實現方法如下:(這裡只發jquery了,相關html代碼請各位自己腦補一下吧,我就不發了,哈哈)
/** * 自動刷新 * @type {*|jQuery|HTMLElement} */ var $container = $('#main'); $container.imagesLoaded( function(){ $container.masonry({ itemSelector : '.item', columnWidth:205, gutterWidth:10, isAnimated: true }); }); var pre_href; //滾動 $(window).scroll(function(){ // 當滾動到最底部以上100像素時, 加載新內容 if ($(document).height() - $(this).scrollTop() - $(this).height()<100) { ajax_load_data(); } }); function ajax_load_data(){ var href = $('#page-nav').find('.nextprev').attr('href'); if(href && href != pre_href){ console.log('href = '+href); pre_href = href; $.ajax({ url:href,//獲取元素列表的地址 data:{'act':'ajax_wap_index'}, dataType:'json', type:'post', beforeSend:function(){ show_loading_body(); }, complete:function(){ show_loading_body(); }, success:function(data){ if(data.status != undefined && data.status == 'ok'){ if(data.html){ var $boxes = $( data.html ); $container.append( $boxes ).masonry("appended", $boxes, true);//追加元素 $container.imagesLoaded(function () { $container.masonry(); });//加載完圖片後,會實現自動重新排列。【這裡是重點】 } if(data.str_pages){ $('#page-nav').html(data.str_pages);//設置下一個分頁的地址。【可以自己補充】 } } } }); } }