效果图
来来来，看啊看，外面的世界多好看，
效果图展示的是瀑布流布局 && 懒加载的效果
数据
图片数据来源 张鑫旭的网络日志
先说下我们的图片链接格式
所有的链接都是
http://cued.xunlei.com/demos/publ/img/P_${name}.jpg
这样的格式，我们需要改变name的值就行了，当
name
值小于10的时候，格式是
00x
,如
002
、
003
，大于10的时候就是
023
这种。
定义
瀑布流布局是一种比较流行的页面布局方式, 最早采用此布局的网站是Pinterest, 图片宽度是固定的，高度自动，产生一种参差不齐的美感。
原理
原理很简单，主要分为以下几步
1、定义高度数组和列数
2、遍历元素，个数小于列数的直接
push
到数组中
3、大于列数的，获取高度数组中最小的值，定义元素的top和left值
4、 重要一点 更新高度数组，将最小高度加上当前元素的高度
知道原理了，代码应该怎么写呢？这里用web端来示例，大概如下
let heightArr = []
let col = 2
let allBox = document.querySelectorAll('.box') // 获取所有盒子
for(let i in allBox){
let boxWidth = allBox[0].offsetWidth // 获取盒子宽度 都一样直接取第一个
let boxHeight = allBox[i].offsetHeight
if(i < col){
heightArr.push(boxHeight) // 把第一行高度都添加进去
} else { // 进行布局操作
let minHeight = Mac.min.apply(null, heightArr) // 获取最小高度
let minIndex = getIndex(heightArr, minHeight) // 获取最小高度的下标 要不就是0 要不就是1
allBox[i].style.position = 'absolute'
allBox[i].style.top = minHeight + 'px'
allBox[i].style.width = minIndex * boxWidth + 'px'
heightArr[minIndex] += boxHeight // 更新最新高度
}
}
// 获取下标
getIndex(arr, val){
for(i in arr){
if(arr[i] == val) {
return i
}
}
}
上面就是实现瀑布流的主要逻辑，这里大概写了下，接下来我们看看小程序怎么实现。
实现
在web页面里面我们可以直接获取、操作DOM，实现起来很方便，何况还有很多的jquery插件可以使用。我们知道小程序里面是没有DOM的，那应该怎么实现呢？我们把思路转换下就行了。
这里我们用三种方式来实现瀑布流布局。
CSS
使用css3来实现是最简单的，我们先捡简单的来说，
使用
column-count
属性设置列数
使用
wx-if
进行判断将图片渲染到左侧还是右侧
wxml
<view class='container'>
<image src='{{item.url}}' wx:if="{{index % 2 != 0 }}" wx:for="{{list}}" mode='widthFix' wx:key="{{index}}"></image>
<image src='{{item.url}}' wx:if="{{index % 2 == 0 }}" wx:for="{{list}}" mode='widthFix' wx:key="{{index}}"></image>
</view>
wxss
.container{
column-count: 2; /*设置列数*/
column-gap:2rpx;
padding-left: 8rpx;
}
image{
width: 182px;
box-shadow: 2px 2px 4px rgba(0,0,0,.4);
}
js获取下数据即可，这里就不赘述了。
节点信息
小程序可以通过 WXML节点信息API 来获取元素的信息，接下来我们来撸码。
wxml
<view class="container">
<view wx:for="{{group}}" style='position:{{item.position}}; top: {{item.top}}; left:{{item.left}}; width:{{width}}rpx;' class='box box-{{index}}' wx:key="{{index}}"
