實現瀑布流

實現效果

有好幾種方案

1.用column-count屬性把頁面元素分為倆列或多列來實現

2.用display flex 分列來展示頁面

3.比如說用js實現

我今天介紹的就是第三種，因為前兩種都會有局限，實現的效果我們希望是左右左右，而不是分成兩列去顯示，因為如果功能需要列表按照熱度顯示，從我們視覺來看就是 左右比較好，而不是一整列 1,2,3,4,5…

當然如果你們希望用column-count 實現的話，也可以 請點擊，我隨便找了一個網址網上有很多，我自己也試過實現起來確實很簡單，純css3實現。

那么好，現在正式開始：

說一下思路，通過js控制兩列數組，分別在這兩個數組中插入圖片實現列表展示

首先HTML布局

<view class="post-content" wx:if="{{list.length}}"><view class="left-view"><repeat for="{{leftList}}" key="index" index="index" item="item"><PostItem :item.sync="item" imgMode="widthFix" /></repeat></view><view class="right-view"><repeat for="{{rightList}}" key="index" index="index" item="item"><PostItem :item.sync="item" imgMode="widthFix" /></repeat></view> </view>

可以看到就是一個外部大殼子，然后兩列 left-view、right-view 之后就是兩個數組循環展示，PostItem是我自己封裝的組件用來展示單個item

css部分

.post-content {padding: 0 24rpx;padding-top: 24rpx;box-sizing: border-box;> view {width: 49%;display: inline-block;vertical-align: top;}.left-view {margin-right: 2%;} }

也很簡單兩列寬度約等于50%中間有間隔

js部分

loadImages () {setTimeout(() => {const data = this.listlet { leftList, rightList } = thisif (data.length) {for (let i = 0; i < data.length; i++) {if (data[i].id % 2 == 1) {leftList.push(data[i])} else {rightList.push(data[i])}}this.leftList = leftListthis.rightList = rightListthis.$apply()}}, 1000); }data = {leftList: [], //左列rightList: [], //右列 }

就可以看到下列圖

但是如果只是這樣實現的話就會有問題，因為它的實現是按照奇偶數實現的，那么如果有幾張圖片正好很高，那么另外一列就會很難看。

下列有問題的情況

可以看到左列很難看

那么我做一下修改, 在遍歷數據的時候做了左右列表的高度檢測，如果哪邊低那么就append到哪邊

loadImages (list) {const newList = list || this.listsetTimeout(() => {let { leftList, rightList } = thisif (newList.length) {helper.forSetTimeout(newList,async (i) => {const isLeft = await this.isPushLeft()if (isLeft) {leftList.push(newList[i])} else {rightList.push(newList[i])}this.leftList = leftListthis.rightList = rightListthis.$apply()}, 50)}}, 300); }// forSetTimeout 實現 function forSetTimeout (list, callback, time = 1000) {for (let i = 0; i < list.length; i++) {setTimeout(((num) => {return callback.bind(null, num)})(i), i * time)} }isPushLeft () {const query = wepy.createSelectorQuery()query.select('.left-view').boundingClientRect()query.select('.right-view').boundingClientRect()return new Promise((resolve, reject) => {query.exec((res) => {const leftData = res[0]const rightData = res[1]resolve(leftData.height < rightData.height)})}) }

最終效果如最上面的圖，事實上setTimeout的時間間隔可以改成30毫秒以內，但是我覺得50毫秒已經不影響正常體驗了。

轉載于:https://www.cnblogs.com/kitebear/p/10550588.html

總結

以上是生活随笔為你收集整理的小程序实现无限瀑布流的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。