瀑布流布局

廢話不多說，直接上**

index.wxml模組

先是把螢幕分成兩半，為了節省編譯時間就用了template模組

"theme"
>
"left"
>
"}" wx:key=
"id"
>
"item" data=
"}">
"right"
>
"}" wx:key=
"id"
>
"item" data=
"}">
"item"
>
"item" wx:for-index=
"index" wx:key=
"}">
"../goods/goods?id=}"
>
"item-img" src=
"}" mode=
"widthfix"
>
"}">
"imgs" src=
"../../static/images/qingxie.png"
>
"kong"
>
}"}" class=
"reserve-img" src=
"../../static/images/reserve.png"
>
"product-content"
>
"product"
>
"product-name"
>
}"product-price"
>
"price"
>￥
}\t起

index.css模組

.theme .theme-list .item .item-img .left,.right .right .list .img .product-content .product .product-name .price

.weight

index.js模組

var leftlist = new array();
var rightlist = new array();
var lefthight = 0,
righthight = 0,
itemwidth = 0;
page(
,photo(
)else
if(lefthight < righthight)
else
if(postlist.length >= leftlist.length + rightlist.length));
}}})
}});
},

總體上來說是，把顯示的寬固定了，但是的高就不知道了，就是要獲取到顯示的高。先把後台的資料獲取到，在通過用wx.getimageinfo這個api來原來的寬高。用原來的寬和顯示的寬做對比let per = res.width / tmp.itemwidth，得出的比例，把比例和原來的高度相乘就可以得出顯示的高度了，然後通過判斷左右兩邊的高度來把放到哪一邊。網頁編譯也如此。

瀑布流布局

瀑布流布局

瀑布流布局

瀑布流布局

相關推薦