【css3技巧(二)】之图片列表瀑布流（超简单css3实现瀑布流）

我就是我 2024-04-17 18:16 91阅读 0赞

#### 小程序列表图片瀑布流 ####

> 样板是小程序。其他各种框架，技术都能实现，纯css.

1、view

> 主要是图片的widthFix属性，宽度固定，高度自适应比例。

<view class="falls">
    		<image class="img" src="https://t.7wpp.com/static/imgs/img%20(7).jpg" mode="widthFix"></image>
    		<image class="img" src="https://t.7wpp.com/static/imgs/img%20(5).jpg" mode="widthFix"></image>
    		<image class="img" src="https://t.7wpp.com/static/imgs/img%20(6).jpg" mode="widthFix"></image>
    		<image class="img" src="https://t.7wpp.com/static/imgs/img%20(11).jpg" mode="widthFix"></image>
    </view>

2、css

> 基于uni-app的单位，其他小程序请自己改，主要用到css3的column-count属性；  
> 可以说是文档流，刚好结合图片的widthFix，数字代表几列。

.falls{ 
    		width: 100%;
    		-moz-column-count: 2;
    		-webkit-column-count: 2;
    		column-count: 2; .img{ 
    			margin-bottom: 20upx;
    			border-radius: 10upx;
    			}
    		}

3、遇到的问题

> 单张图片还好，上面的实现方式，放入其他内容，有可能被切割到另一列。

![column分割][column]

> 解决方法：在子列表中加入，height:100%;overflow:auto;

.list{ 
    		height:100%;
    		overflow: auto;
    		border-radius:20upx;
    		margin-bottom:30upx;
    		box-shadow:0px 6upx 13upx 1upx rgba(51,51,51,0.1); .l_img{ 
    			border-radius:20upx 20upx 0px 0px;
    	}

[column]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/c2b117ffebcc43d3a555ce79461e0db1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，91人围观）

还没有评论，来说两句吧...

相关阅读

相关【css3技巧(二)】之图片列表瀑布流（超简单css3实现瀑布流）

小程序列表图片瀑布流 > 样板是小程序。其他各种框架，技术都能实现，纯css. 1、view > 主要是图片的widthFix属性，宽度固定，高度自适应比例。 ...

我就是我/ 2024年04月17日 18:16/ 0 赞/ 92 阅读

相关 CSS超简单实现瀑布流

摘要：其实现在瀑布流的应用很是广泛，没有什么指示体验不错，这里我们就使用最简单的来使用。主要的就两个，一个是控制父类，一个控制包裹住图片的类 <!DOCTYP

左手的ㄟ右手/ 2023年06月25日 07:54/ 0 赞/ 27 阅读

相关 css瀑布流

简单效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

忘是亡心i/ 2022年12月20日 12:43/ 0 赞/ 209 阅读

相关 css3实现瀑布流图片特效

htmL: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti

忘是亡心i/ 2022年11月03日 11:52/ 0 赞/ 258 阅读

相关 JavaScript、jQuery、css3实现瀑布流加载

实现的最终效果如下： ![Center][] 在实现的过程中用到的有： 1.css设置边框为圆角： border-radius: 5px;

落日映苍穹つ/ 2022年08月20日 14:24/ 0 赞/ 250 阅读

相关简单图片瀑布流

html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

àì夳堔傛蜴生んèń/ 2022年06月09日 13:24/ 0 赞/ 291 阅读

相关用CSS3实现响应式的瀑布流

前言：虽然瀑布流在现在不是很流行了，自己之前通过JavaScript和css3都实现过。这次做项目的时候又遇到了这个问题，就重新整理了一下，并把代码放出来分享一下

小咪咪/ 2022年06月06日 12:45/ 0 赞/ 332 阅读

相关纯css瀑布流、Grid布局

1、纯css瀑布流 [https://www.w3cplus.com/css/pure-css-create-masonry-layout.html][https_www.w

青旅半醒/ 2022年05月12日 17:36/ 0 赞/ 1129 阅读

相关 js简单瀑布流实现

什么是瀑布流瀑布流其实就是一种布局方式，比如说有很多模块，这些模块大小不一，怎样才能把这些模块相对漂亮的排列到一起？瀑布流就可以很好地解决这个问题。首先把这

柔情只为你懂/ 2022年05月10日 00:20/ 0 赞/ 309 阅读

相关 CSS3&JavaScript 瀑布流

实现方法概述 html页面要实现瀑布流，目前有两种方案，它们的适用场景不同 CSS3 的 column-count（适用于所有元素一次性加载，页面更新用分页来实现

我会带着你远行/ 2022年04月13日 07:44/ 0 赞/ 393 阅读