瀑布流在网页和uniapp中的运用

效果图如下：

如上图所示：左侧是在HTML上的效果图，右侧是在uniapp小程序上的效果图。
HTML代码如下：

<div class="view">
    <div class="item">
        <div class="item1">
            <img src="https://i03piccdn.sogoucdn.com/c93dda9b1f8f86dc" alt="">
            <li>这是1个瀑布流这是一个瀑布流</li>
        </div>
		<div class="item2">
            <img src="https://i04piccdn.sogoucdn.com/50387a3db348c111" alt="">
            <li>这是2个瀑布流这是一个瀑布流</li>
        </div>
		<div class="item3">
            <img src="https://i03piccdn.sogoucdn.com/8a872feb6f9746f7" alt="">
            <li>这是3个瀑布流这是一个瀑布流</li></div>
		<div class="item4">
            <img src="https://i04piccdn.sogoucdn.com/0ddf3fb78897b1b4" alt="">
            <li>这是4个瀑布流这是一个瀑布流</li>
        </div>
		<div class="item4">
            <img src="https://i04piccdn.sogoucdn.com/0ddf3fb78897b1b4" alt="">
            <li>这是5个瀑布流这是一个瀑布流</li>
        </div>
		<div class="item4">
            <img src="https://i04piccdn.sogoucdn.com/0ddf3fb78897b1b4" alt="">
            <li>这是6个瀑布流这是一个瀑布流</li>
        </div>
		<div class="item6">
            <img src="https://i04piccdn.sogoucdn.com/6908b656b9f4c864" alt="">
            <li>这是7个瀑布流这是一个瀑布流</li>
        </div>
		<div class="item7">
            <img src="https://i02piccdn.sogoucdn.com/3130d59219de4ce5" alt="">
            <li>这是8个瀑布流这是一个瀑布流</li>
        </div>
    </div>
</div>
<style>
    .view{
    }
    .item{
		column-count: 2; // 设置显示2列
		column-gap: 2px; //设置或检索对象的列与列之间的间隙为2px
		width: 100%;
        /* width: 95%; */
        background: #fefefe;
        border: 2px solid #fcfcfc;
        box-shadow: 0px 2px 2px rgba(34, 25, 25, 0.4);
        margin: 5px 2px 2px 2px;
        padding: 1px;
        transition: opacity .4s ease-in-out; // 检索或设置对象变换时的过渡
        display: inline-block;
		font-size: 25px;
    }
    .item img{
        width: 100% !important;
        display:block;
    }
</style>

uniapp代码如下：

//template部分：


	<view class="collect-con">
		<view class="item">
			<view class="collectItem" v-for="(item,index) in list" :key="item"  @click="goPage(item.id)">
				<view class="item-content" >
					<image class="collectImg" :src="item.img" mode="widthFix"></image>
					<view v-text="item.title" class="collectTitle"></view>
					<view class="userfollow">取消收藏</view>
				</view>
			</view>	    
		</view>
	</view>

//style部分：

.collect-con{
		padding:30upx;
	}
	.item{
		column-count: 2; // 设置显示2列
		column-gap: 30upx; //设置或检索对象的列与列之间的间隙为30upx
		width: 100%;
	}
	.collectItem {
		border-radius:6upx;
		display: inline-block;
		margin-bottom: 30upx;
	}
}

这个瀑布流主要是运用了CSS3 columns 属性

Column-count 把 div 元素中的内容划分为n列。
Column-gap将 div 元素中的内容分为三列，并列间 xx 像素的间隔。

有一点要注意的是如果将内容划分为两列，当内容上半部分和下半部分相同时瀑布流左右两侧会相同，
n列也是如此。