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源码地址