瀑布流
这就是大概的效果
一、WXML
这个是完整的两个板块，其实具体里面是什么不重要，重要的是两个最外层的view标签：
<view class="pubu_left" id="scroll2-left">
<view class="photo_left_content" wx:for="{
{random_left_content}}" bindtap="goDetail" data-id="{
{item._id}}" style="color:{
{bright2}}" wx:key="index" wx:index="index">
<image lazy-load="true" class="photo_image" src="{
{item.firstImage.url}}" mode="widthFix"></image>
<view class="inform-container">
<view class="inform-title">{
{item.title}}</view>
<view class="ava-name-like">
<view class="ava-name">
<image src="{
{item.creator_inform.avatarUrl}}" class="inform-avatarUrl"></image>
<view class="name">{
{item.creator_inform.nickName}}</view>
</view>
<view class="like" wx:if="{
{item.userIsLike}}" catchtap="cancelLike" data-index="{
{index}}" data-direction="left" data-id="{
{item._id}}" data-publisheropenid="{
{item.creator_inform.openId}}">
<image lazy-load="true" src="/image/smalllove-red.png"></image>
<text>{
{item.like.length}}</text>
</view>
<view class="like" wx:else catchtap="addLike" data-index="{
{index}}" data-direction="left" data-id="{
{item._id}}" data-publisheropenid="{
{item.creator_inform.openId}}">
<image lazy-load="true" src="/image/smalllove-white.png" ></image>
<text>{
{item.like.length}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="pubu_right" id="scroll2-right">
<view class="photo_right_content" wx:for="{
{random_right_content}}" bindtap="goDetail" data-id="{
{item._id}}" style="color:{
{bright2}}" wx:key="index" wx:index="index">
<image lazy-load="true" class="photo_image" src="{
{item.firstImage.url}}" mode="widthFix"></image>
<view class="inform-container">
<view class="inform-title">{
{item.title}}</view>
<view class="ava-name-like">
<view class="ava-name">
<image src="{
{item.creator_inform.avatarUrl}}" class="inform-avatarUrl"></image>
<view class="name">{
{item.creator_inform.nickName}}</view>
</view>
<view class="like" wx:if="{
{item.userIsLike}}" catchtap="cancelLike" data-index="{
{index}}" data-direction="right" data-id="{
{item._id}}" data-publisheropenid="{
{item.creator_inform.openId}}">
<image lazy-load="true" src="/image/smalllove-red.png"></image>
<text>{
{item.like.length}}</text>
</view>
<view class="like" wx:else catchtap="addLike" data-index="{
{index}}" data-direction="right" data-id="{
{item._id}}" data-publisheropenid="{
{item.creator_inform.openId}}">
<image lazy-load="true" src="/image/smalllove-white.png" ></image>
<text>{
{item.like.length}}</text>
</view>
</view>
</view>
</view>
</view>缩略就是这样：
<view class="pubu_left" id="scroll-left">
<view wx:for="{
{arr1}}"><view/>
</view>
<view class="pubu_right" id="scroll-right">
<view wx:for="{
{arr2}}"><view/>
</view>等于是有左列和右列，id分别为scroll-left和scroll-right
二、WXSS
原本我是外层套一个div然后用flex布局的，后面发现flex布局会让pubu_left和pubu_right两个板块高度一样，这样就获取不到实时的高度了，所以我就用浮动布局了。
.pubu_left {
float: left;
}
.pubu_left {
float: right;
}三、JS
const query = wx.createSelectorQuery()
let leftLength
let rightLength
for (let i = 0; i < arr.length; i++) {
//获取pubu-left的高度
leftLength = await new Promise((resolve,reject)=>{
query.select("scroll-left").boundingClientRect(res=>{
resolve(res.bottom)
}).exec()
})
//获取pubu-right的高度
rightLength = await new Promise((resolve,reject)=>{
query.select("scroll-right").boundingClientRect(res=>{
resolve(res.bottom)
}).exec()
})
//哪个长就插入哪里
if (leftLength <= rightLength) {
//插入pubu-left数组
} else if (leftLength > rightLength) {
//插入pubu-right数组
}
}这里用了promise解决boundingClientRect异步问题，不会可以去看看es6