介绍/*,页面/测试/test.wxss */#左,,# {
,宽度:48%;
,保证金:0,1%;
,浮动:左;
}
# left 形象,,{# right 图像
,宽度:100%;
} //. js
let leftHeight =, 0,, rightHeight =, 0;,//分别定义左右两边的高度
let 查询;
页面({
,数据:{
,,列表:[{
,,,标题:,& # 39;1 & # 39;
,,,url:, & # 39; http://zq.jhcms.cn/attachs/photo/201711/20171130_176CFE51B6710715B1BBBEF2F86ACB0C.jpg& # 39;
,,,},{
,,,标题:,& # 39;2 & # 39;
,,,url:, & # 39; http://img3.imgtn.bdimg.com/it/u=1417732605, 3777474040, fm=26, gp=0. jpg # 39;
,,},{
,,,标题:,& # 39;3 & # 39;
,,,url:, & # 39; http://f10.baidu.com/it/u=121654667, 1482133440, fm=72 & # 39;
,,},{
,,,标题:,& # 39;4 & # 39;
,,,url:, & # 39; http://img3.imgtn.bdimg.com/it/u=1417732605, 3777474040, fm=26, gp=0. jpg # 39;
,,},{
,,,标题:,& # 39;5 & # 39;
,,,url:, & # 39; http://zq.jhcms.cn/attachs/photo/201711/20171130_9E39DA252E3946BE36218D85876C4AB4.jpg& # 39;
,,},{
,,,标题:,& # 39;6 & # 39;
,,,url:, & # 39; http://img3.imgtn.bdimg.com/it/u=1417732605, 3777474040, fm=26, gp=0. jpg # 39;
,,},{
,,,标题:,& # 39;7 & # 39;
,,,url:, & # 39; http://img3.imgtn.bdimg.com/it/u=1417732605, 3777474040, fm=26, gp=0. jpg # 39;
,,},{
,,,标题:,& # 39;8 & # 39;
,,,url:, & # 39; http://img3.imgtn.bdimg.com/it/u=1417732605, 3777474040, fm=26, gp=0. jpg # 39;
,,},{
,,,标题:,& # 39;9 & # 39;
,,,url:, & # 39; http://f10.baidu.com/it/u=121654667, 1482133440, fm=72 & # 39;
,,},{
,,,标题:,& # 39;7 & # 39;
,,,url:, & # 39; http://img4.imgtn.bdimg.com/it/u=2748975304, 2710656664, fm=26, gp=0. jpg # 39;
,,},{
,,,标题:,& # 39;8 & # 39;
,,,url:, & # 39; http://img2.imgtn.bdimg.com/it/u=1561660534, 130168102, fm=26, gp=0. jpg # 39;
,,},{
,,,标题:,& # 39;9 & # 39;
,,,url:, & # 39; http://img3.imgtn.bdimg.com/it/u=1417732605, 3777474040, fm=26, gp=0. jpg # 39;
,,},{
,,,标题:,& # 39;10 & # 39;
,,,url:, & # 39; http://zq.jhcms.cn/attachs/photo/201711/20171130_176CFE51B6710715B1BBBEF2F86ACB0C.jpg& # 39;
,,},
,,leftList: [],
,,rightList: []
},
,onLoad () {
this.isLeft才能();
},
,async isLeft (), {
const 才能,{,列表,leftList,, rightList },=, this.data;
时间=query 才能;wx.createSelectorQuery ();
for 才能;(const item of 列表),{
,,leftHeight & lt;=, rightHeight ?, leftList.push(项),:,rightList.push(项),,//判断两边高度,来觉得添加到那边
,,await this.getBoxHeight (leftList, rightList);
,,}
},
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章给大家分享的是有关微信小程序如何通过js实现瀑布流布局的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
<强>前言
瀑布流——小程序中数据列表或者图片展示难免高度不一,而我们一般固定宽度,让其高度自适应,并无缝对接。如下图:
& lt; !——页面/测试/test.wxml祝辞
& lt; view 类=癱ontainer"祝辞
,& lt; view id=發eft"比;
& lt;才能view 天气:为=皗{leftList}},,天气:key>
,,& lt; image src=https://www.yisu.com/zixun/皗{item.url}}”模式=' widthFix '>
<文本> {{item.title}}
<视图id=罢贰?
<查看天气:=" {{rightList}}”天气:关键>
<图像src="{{项目。url}}”模式=' widthFix '>
<文本> {{item.title}}
<强>测试。wxs
<>强测试。js
