瀑布流特別適合多圖片布局加載,效果很理想。
masonry是基于jquery的瀑布流插件,簡單實用,本文就以滑動無限加載為例,介紹這款插件
1.環境搭建
腳本
這三個腳本必不可少,第三個imagesloaded是針對圖片加載的插件,因為在加載圖片的時候,可能由于網絡原因,圖片未加載完全,masonry就開始布局,這樣會導致錯位。
2.布局容器
容器
只需要一個識別的容器就行,masonry會選擇該容器,并對其中的元素排序,容器結構如圖,每個元素(ele)是被div包裹的img,各個元素的CSS隨意。
3.初始化masonry
初始化加載
初始化加載代碼如圖,可以先加載圖片完成,再對圖片進行排序。
4.ajax滑動加載
滑動檢測
追加元素
注意:masonry追加元素不能像普通的jq追加元素一樣,要先轉換為jquery元素(即:$('.......'))
5.效果圖
效果
加載中
自適應