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

小鱼儿 2022-11-29 11:42 194阅读 0赞

效果图如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_left]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_left 1]  
如上图所示：左侧是在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 属性][CSS3 columns]

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

有一点要注意的是如果将内容划分为两列，当内容上半部分和下半部分相同时瀑布流左右两侧会相同，  
n列也是如此。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_left 2]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_left 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_left]: https://img-blog.csdnimg.cn/20200820094207982.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0,size_16,color_FFFFFF,t_70#pic_left
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_left 1]: /images/20221124/1ceff8882abb479c995d6bf3d6ab93d8.png
[CSS3 columns]: https://www.w3school.com.cn/cssref/pr_columns.asp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_left 2]: https://img-blog.csdnimg.cn/20200820101734492.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0,size_16,color_FFFFFF,t_70#pic_left
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_left 3]: /images/20221124/149ee1043b6442ed9bfc4d08be58872c.png