缺點：影響效能
主要實現步驟：
1.區分第一行和後面的行
2.第一行浮動
3.獲取第一行所有的高度
4.找到最小高度的
5.後面進行定位
6.定位到上一行最矮的位置下
7.修改當前最小值（後面的一次加上最矮的高度）
8.從步驟4開始迴圈
//css
.cont
/* 這裡不用margin是因為offset識別不了margin，只能識別到padding */
.box
.boximg
.boximg img
//body---這裡的都是寬度固定的，高度不同的
="cont"
>
="box"
>
="boximg"
>
""/>
<
/div>
<
/div>
="box"
>
="boximg"
>
""/>
<
/div>
<
/div>
="box"
>
="boximg"
>
""/>
<
/div>
<
/div>
="box"
>
="boximg"
>
""/>
<
/div>
<
/div>
="box"
>
="boximg"
>
""/>
<
/div>
<
/div>
="box"
>
="boximg"
>
""/>
<
/div>
<
/div>
="box"
>
="boximg"
>
""/>
<
/div>
<
/div>
="box"
>
="boximg"
>
""/>
<
/div>
<
/div>
="box"
>
="boximg"
>
""/>
<
/div>
<
/div>
="box"
>
="boximg"
>
""/>
<
/div>
<
/div>
="box"
>
="boximg"
>
""/>
<
/div>
<
/div>
="box"
>
="boximg"
>
""/>
<
/div>
<
/div>
<
/div>
//js
function
waterflow()
,,,,
,,,,
,,,]
//定義乙個陣列用來存放的高度
this
.heightarr =
;this
.init()
;this
.addevent()
;}waterflow.prototype.
init
=function()
waterflow.prototype.
firstline
=function()
} waterflow.prototype.
followline
=function()
} waterflow.prototype.
addevent
=function()
}}waterflow.prototype.
display
=function()
" />
` }
this
.cont.innerhtml += str;
//重新獲取所有的box
this
.box = document.
queryselectorall
(".box");
//初始化高度，因為馬上要重新渲染整個頁面了
this
.heightarr =
;this
.init()
;}function
getmin
(arr)
window.
onload
=function()
uniapp實現瀑布流懶載入實現和無限上拉載入更多
效果圖 說明 函式說明 傳入乙個陣列，迴圈獲取高度，會根據把原陣列拆分成兩個陣列，放在兩列，計算單列累計高度，對比高度值的大小，實現瀑布流的布局，由於獲取高度需要一定的時間，所以使用async await 阻塞for 迴圈的程序，每獲取到乙個的高度就賦值渲染到頁面上，實現載入出乙個就先渲染上去，達成...
jquery實現瀑布流效果 下拉載入新資料
瀑布流效果在很多 還是有的，這種錯落有致的排布看著還是很不錯的呢。今天我就來記錄一下關於用jquery實現瀑布流效果的 一 頁面基本排版 1.items盒子主要用來存放我們需要擺放的資料item 2.tips是頁面載入資料的時候用來提示使用者的文字 class items class item di...
Masonry Ajax 實現無限重新整理瀑布流
原文 效果就如我的個人站yooao.cc 把我實現的思路分享給大家。masonry渲染頁面如果有時需要imagesloaded輔助，不然有可能會造成布局重疊。乙個大體的思路 前端取得最後一篇文章的id，下拉時進行ajax請求新增文章進布局，並同時更新最後一篇文章的id，這樣就可往復迴圈實現無限瀑布流...