小程序流式布局

心已赠人 2022-03-18 15:08 268阅读 0赞

这只是一个取巧的方式来实现流式布局，有潜在bug，原理是布局分成两列，将要显示的数据也分成奇数列和偶数列，左侧展示偶数列数据，右侧展示奇数列数据。

潜在的bug是如果偶数列里的图片高度一直比奇数列的高，就会两列一列特别长的情况。

修复此潜在bug的博客链接[https://blog.csdn.net/u012011360/article/details/88051196][https_blog.csdn.net_u012011360_article_details_88051196]

**效果图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70][]

**html部分：**

</view>

</view>

**css部分：**

.left\{

float:left;

.listLeft,.listRight\{

width: 340rpx;

.listRight\{

margin-left: 20rpx;

**js部分：**

var result = res.data;

//console.info(result.data.goods);

if (result.code == 0) \{

var goods = result.data.goods;

var goodsRight = \[\];

var goodsLeft = \[\];

for (var i = 0; i < goods.length;i++)\{

if(i%2==0)\{

goodsLeft.push(goods\[i\]);

\}else\{

goodsRight.push(goods\[i\]);

console.info(goods);

that.setData(\{

goods: goods,

goodsRight: goodsRight,

goodsLeft: goodsLeft,

noGoods: 'hide',

more: ''

\})

[https_blog.csdn.net_u012011360_article_details_88051196]: https://blog.csdn.net/u012011360/article/details/88051196
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70]: /images/20220318/d46fdd12f04f4a9abf2f1c241ac618a9.png