小程序瀑布流布局 (微信小程序瀑布流写法)

在微信小程序上实现图片瀑布流，大概效果如下：

本次使用的方式是通过将获取的数据通过取余分别分配到左右两个列表中。

1. 可横向的进行排列数据。
2. 分页加载时不会对之前的数据进行重新排序。
3. 本方式适合分页加载。

缺点：

左右两边高度有可能会出现失衡，比如一边很高，另一边很低：

由于图片高度不均匀发生倾斜

下面上实现的代码：

wxml

<!--将元素平均分配到左右两个view中，缺点是可能出现左右高度失衡的效果
	对于图片是webp格式的 image 需要添加 webp="webp"属性
-->
<view class="container1">

 <view id="left">
  <view wx:for="{{leftList}}" wx:key="index">
   <image src="{{item.url}}" mode='widthFix' webp="webp"></image>
   <text>{{item.title}}</text>
  </view>
 </view>
 <view id="right">
  <view wx:for="{{rightList}}" wx:key>
   <image src="{{item.url}}" mode='widthFix'></image>
   <text>{{item.title}}</text>
  </view>
 </view>
</view>

js:

// pages/pubulist-equal/pubulist-equal.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [{
      title: '1',
      url: 'http://f10.baidu.com/it/u=121654667,1482133440&fm=72',
     }, {
      title: '2',
      url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg',
     }{
      title: '5',
      url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg',
     },{
      title: '6',
      url: 'http://f10.baidu.com/it/u=121654667,1482133440&fm=72',
     },{
      title: '8',
      url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg',
     },{
      title: '9',
      url: 'http://f10.baidu.com/it/u=121654667,1482133440&fm=72'
     },{
      title: '7',
      url: 'https://xxx/img/tos-cn-i-0022/9c447415dc4e44080:1620.image?from=post'
     },{
      title: '8',
      url: 'http://img2.imgtn.bdimg.com/it/u=1561660534,130168102&fm=26&gp=0.jpg'
     },{
      title: '9',
      url: 'http://f10.baidu.com/it/u=121654667,1482133440&fm=72'
     },{
      title: '10',
      url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg',
     }],
     leftList:[],
     rightList:[]
  },

  /**
   * 生命周期函数--监听页面加载
   * js array ： concat 合并数组 、push 追加一个数组元素
   */
  onLoad: function (options) {
    /**
     * 在此处把获取到的list 取余分别分配到左右的两个list中，也可以在wxml内进行处理。
     */

    let index =0;
    let leftList =  this.data.leftList;
    let rightList = this.data.rightList;
    this.data.list.forEach(element => {
      if(index % 2==0){
        this.data.leftList.push(element);
      }else{
        this.data.rightList.push(element);
      }
      index++;
    });
    this.setData({leftList,rightList});

  }
})

css：

#left, #right{
  width: 48%;
  margin: 0 1%;
  float: left;
 }
 #left image, #right image{
  width: 100%;
 }

End！欢迎关注和转发！