记录小白微信小程序开发日志第四篇，希望能够帮助到大家，如果觉得有用还行可以给帅气的作者点点赞，谢谢

<!-- 瀑布流 -->

<block wx:if="{{img2.length != 0}}">

<view class="xg_all">

<view class="xg_content">

<view class="content_l">

<block wx:for="{{img2}}" wx:key="idx">

<view class="content_item" wx:if="{{index%2==0}}" data-id="{{item.id}}" bindtap="xqTap">

<image src="{{item.a}}" class="image" mode="widthFix" lazy-load="true" />

<view class="qy-title">{{item.b}}</view>

<view class="qy-user">

<view class="qy-z">

<image src='/images/tx.jpg' class="qy-tx" />

<text class="qy-mz">{{item.c}}</text>

</view>

<view class="qy-y">

<text style="font-size: 24rpx;margin-left: 10rpx;">{{item.d}}</text>

<image src='/images/dz.png' style="width: 30rpx; height: 30rpx;" />

</view>

</view>

</view>

</block>

</view>

<view class="content_r">

<block wx:for="{{img2}}" wx:key="idx">

<view class="content_item" wx:if="{{index%2==1}}" data-id="{{item.id}}" bindtap="xqTap">

<image src="{{item.a}}" class="image" mode="widthFix" lazy-load="true" />

<view class="qy-title">{{item.b}}</view>

<view class="qy-user">

<view class="qy-z">

<image src='/images/tx.jpg' class="qy-tx" />

<text class="qy-mz">{{item.c}}</text>

</view>

<view class="qy-y">

<text style="font-size: 24rpx;margin-left: 10rpx;">{{item.d}}</text>

<image src='/images/dz.png' style="width: 30rpx; height: 30rpx;" />

</view>

</view>

</view>

</block>

</view>

</view>

<view class='jilu'>—— 没有更多内容了，快去发帖吧 ——</view>

</view>

</block>

<block wx:else>

<view class="p-null">

<image src="/images/zbdl.png" style="width: 128rpx; height: 128rpx;margin-bottom: 20rpx;" />

<view>求求你发个帖子吧</view>

</view>

</block>

<button class="ft" bindtap="ftTap">

<image src="/images/ft.png " style="width: 48rpx; height: 48rpx; " />

</button>

/* 瀑布流 */

.xg_all {

padding: 15rpx;

overflow: hidden;

box-sizing: border-box;

background: linear-gradient(rgb(245, 245, 245) 0%, rgb(255, 255, 255) 100%);

}

.xg_content {

clear: both !important;

overflow: hidden;

width: 100%;

}

.xg_content .content_l, .xg_content .content_r {

width: 355rpx;

overflow: hidden;

margin: 15rpx 0;

border-radius: 5px;

box-shadow: 0px 0px 20px 0px rgba(235, 235, 235, 0.6);

}

.xg_content .content_l {

float: left;

}

.xg_content .content_r {

float: right;

}

.xg_content .content_item {

display: inline-block;

background: #fff;

margin-bottom: 15rpx;

width: 100%;

position: relative;

border-radius: 5px;

}

.content_item .image {

width: 355rpx;

border-top-left-radius: 5px;

border-top-right-radius: 5px;

}

.content_item .qy-title {

margin-top: 5rpx;

font-size: 28rpx;

display: block;

color: #000;

margin-left: 24rpx;

/* 控制宽度 */

width: 320rpx;

max-width: 320rpx;

/* 显示多行 */

display: -webkit-box;

overflow: hidden;

/* 2为显示的行数 */

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

}

.qy-user {

display: flex;

align-items: center;

padding: 15rpx 0;

}

.qy-z {

width: 60%;

display: flex;

align-items: center;

}

.qy-tx {

width: 32rpx;

height: 32rpx;

border-radius: 50%;

margin-left: 20rpx;

}

.qy-mz {

width: 80px;

font-size: 24rpx;

margin-left: 10rpx;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

.qy-y {

width: 40%;

display: flex;

align-items: center;

flex-direction: row-reverse;

margin-right: 20rpx;

}

.ft {

position: fixed;

right: 20px;

bottom: 20px;

width: 100rpx;

height: 100rpx;

border-radius: 100%;

display: flex;

align-items: center;

justify-content: center;

background: white;

padding: 0;

margin: 0;

z-index: 99;

box-shadow: 0px 0px 10px 0px #cecece;

}

.ft::after {

border: none;

}

.jilu {

margin-top: 20px;

text-align: center;

font-size: 24rpx;

color: #c7c7c7;

margin-bottom: 5rpx;

position: relative;

}

.p-null {

width: 100%;

margin-top: 100px;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

font-size: 22rpx;

}