瀑布流特別適合多圖片布局加載，效果很理想。

masonry是基于jquery的瀑布流插件，簡(jiǎn)單實(shí)用，本文就以滑動(dòng)無限加載為例，介紹這款插件

1.環(huán)境搭建

腳本

這三個(gè)腳本必不可少，第三個(gè)imagesloaded是針對(duì)圖片加載的插件，因?yàn)樵诩虞d圖片的時(shí)候，可能由于網(wǎng)絡(luò)原因，圖片未加載完全，masonry就開始布局，這樣會(huì)導(dǎo)致錯(cuò)位。

2.布局容器

容器

只需要一個(gè)識(shí)別的容器就行，masonry會(huì)選擇該容器，并對(duì)其中的元素排序，容器結(jié)構(gòu)如圖，每個(gè)元素（ele）是被div包裹的img，各個(gè)元素的CSS隨意。

3.初始化masonry

初始化加載

初始化加載代碼如圖，可以先加載圖片完成，再對(duì)圖片進(jìn)行排序。

4.ajax滑動(dòng)加載

滑動(dòng)檢測(cè)

追加元素

注意：masonry追加元素不能像普通的jq追加元素一樣，要先轉(zhuǎn)換為jquery元素（即：$（'.......'））

5.效果圖

效果

加載中

自適應(yīng)