jQuery瀑布流插件masonry使用教程

瀑布流特别适合多图片布局加载，效果很理想。
masonry是基于jquery的瀑布流插件，简单实用，本文就以滑动无限加载为例，介绍这款插件

1.环境搭建

脚本
这三个脚本必不可少，第三个imagesloaded是针对图片加载的插件，因为在加载图片的时候，可能由于网络原因，图片未加载完全，masonry就开始布局，这样会导致错位。

2.布局容器

容器
只需要一个识别的容器就行，masonry会选择该容器，并对其中的元素排序，容器结构如图，每个元素（ele）是被div包裹的img，各个元素的CSS随意。

3.初始化masonry

初始化加载
初始化加载代码如图，可以先加载图片完成，再对图片进行排序。

4.ajax滑动加载

滑动检测

追加元素
注意：masonry追加元素不能像普通的jq追加元素一样，要先转换为jquery元素（即：$（’…’））
5.效果图

效果