jQuery無限載入瀑布流錯位解決淺談

jQuery無限載入瀑布流錯位解決淺談

• 先上圖看看效果：

上圖就是瀑布流的簡單佈局

---

• 瀑布流佈局的官網：

瀑布流佈局的官網
大家可以去看看api

• 怎麼使用

var $container = $('#container');
// initialize
$container.masonry({
  columnWidth: 200,//每列的寬度，不設就按第一個計算
  itemSelector: '.item',//需要排列的元素
  gutter: 20, //每列的間隙
});

#container：你的列表容器
.item：你的列表項
比較簡單，引入了官方的js檔案，我們繫結容器就可以實現瀑布流。
然後就是無限載入，很多人喜歡用下拉自動載入，但是我個人覺得這樣你的底部就等於白做了所以我做了一個按鈕：

這樣感覺沒那麼匆忙，慢慢走慢慢看嘛。

• 最後說說我怎麼解決載入更多佈局錯亂的解決：

parentDiv.masonry().masonry("destroy");

masonry("reload");我用過沒效果，然後就是每次載入到未繫結的新節點做瀑布流佈局方式，這隻能滿足我的部分需求，所以我用了銷燬和繫結新節點兩種方式滿足我的需求。

還是給個原始碼，萬一有人需要呢。
github原始碼地址