實現方法如下:(這里只發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);//設置下一個分頁的地址?!究梢宰约貉a充】}}}}); }}
新聞熱點
疑難解答
圖片精選