jQuery Masonry是一種瀑布流布局的JavaScript庫,可以將網頁上的元素呈現成不規則的網格狀。它有以下特點:
- 網頁元素像瀑布一樣從上往下排列,尤其適合圖片展示。
- 元素之間沒有絕對的高度差異,整體看起來比較均衡。
- 支持延遲加載功能,當用戶滾動頁面時,只會加載當前視窗內的元素,減少網頁加載時間。
jQuery Masonry還有一個非常重要的特點:它可以無限滾動。
var $container = $('#container');
$container.masonry({
columnWidth: 200,
itemSelector: '.item',
});
$container.infinitescroll({
navSelector: '.pagination',
nextSelector: '.pagination a.next',
itemSelector: '.item',
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
}, function(newElements) {
var $newElems = $(newElements);
$container.append($newElems).masonry('appended', $newElems, true);
});
以上就是實現無限滾動的代碼。其中,調用了另一個jQuery插件——Infinite Scroll,用于頁面滾動到底部時追加新的元素。
使用時需要注意,要確保每個元素的寬度都一致,不然會導致錯位。此外,由于它不會等待所有元素加載完再進行布局,這會導致由于圖片加載過慢而出現的高度錯誤問題。可以在元素加載時先使用占位圖占位,圖片加載完成后再正常展示。
總的來說,jQuery Masonry的使用方便快捷,可以為網頁增加不一樣的排版效果,同時也可以實現網頁無限滾動,大大增強了用戶體驗。