瀑布流的參考實現可以看這篇部落格：3種方式實現瀑布流布局
/**
flex布局實現
*/.box
.item
/**column布局實現
*/.box
.item
}
另外還可能出現下面這種情況，該列的最後乙個塊的部分到了下一列首部。
可以自定義列數、行間距、列間距，注意margin是使用者在對父元件設定了margin的情況下需要填寫的，沒有設定可以不填。
/**
* @description:
* @param vm : this
* @param parent : 瀑布流元件
* @param arg:
* @return
*/function
wate***ll
(vm, parent, arg)
) vm.
$nexttick((
)=>
px; width:
$px`
)//將行高push到陣列
arr.
push
(height);}
else
}// 4 設定下一行的第乙個盒子位置 top值就是最小列的高度
// 1.8ms：耗時
// item.style.top = `$px`
// item.style.left = `$px`
// 0.3ms： 多個設定和合併成乙個設定，效能更優，注意要加上width設定，此操作會把上面的width覆蓋掉
item.
setattribute
("style"
,`top:
$px; left:
$px; width:
$px`
)// 5 修改最小列的高度
// 最小列的高度 = 當前自己的高度 + 拼接過來的高度 + 豎直間隔
arr[index]
= arr[index]
+ height + divhgap;}}
)},100)}
)}//clientwidth 處理相容性
function
getclient()
}export
vm.$nexttick 和 settimeout都是為了正確的獲取高度，但是這個處理不準確，的載入不知道什麼時候結束，所以這裡可以使用的懶載入外掛程式，在載入之後進行settimeout中間的操作。如vue-lazyload 等
在vue檔案使用
這裡監控onsize的變化可以跟隨頁面變化而調整瀑布流。
>
class
="box"
ref="box"
id="box"
>
class
="item"
ref="item"
>
src=
"@/assets/image/[email protected]"
alt="
" />
div>
class
="item"
>
src=
"@/assets/image/[email protected]"
alt="
" />
div>
div>
template
>
Vue瀑布流外掛程式
我自己寫的乙個的vue瀑布流外掛程式，列數自適應，不用設定每個卡片的高度。測試頁面 page.vue 模板頁面 waterfollow.vue 和 wfcolumn.vue 在page.vue中，修改itemw的值，設定每列的最小寬度。例如 itemw 200 意為200px list為陣列。高度不...
瀑布流實現
html 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 js 一定要用window.onload不能用 function var data window.onload function pbl pbl function pbl...
vue瀑布流的另類實現方式
最近寫介面，需要使用瀑布流方式顯示商品，網上找了很多方法，效果都不是很理想。咱對這瀑布流的要求也不高，只要兩列商品正常顯示互不影響就行了。思考了下，決定使用flex布局分成n列，每列的商品就不會互相影響，大致思考的布局是這樣。先是對介面進行布局，使用flex布局將容器劃分為n列。中分成了兩列，實際上...