简单实现瀑布流

短命女 2023-05-31 10:16 44阅读 0赞

view

<view class="list-view">
    			<view class="m-view" v-for="(item,index) in listGoods" :key="item">
    				<image class="g-img" src="../../static/temp/cate21.jpg" mode=""></image>
    				<view class="m-title">
    					ZL933袜子（男女款）5双/袋颜色随机
    					3天发货
    				</view>
    				<view class="j-view">
    					200 积分
    				</view>
    			</view>
    		</view>

js

export default {
    		data() {
    			return {
    				listGoods:[1,1,1,1,1,1,1,1,1,1]
    			}
    		},
    		methods: {
    			
    		}
    	}

css

.list-view{
    		width: 100%;
    		background-color: #FFFFFF;
    		padding: 20upx;
    		display: flex;
    		flex-wrap: wrap;
    		justify-content: flex-start;
    	}
    	.m-view{
    		width: 346upx;
    		height: 408upx;
    		background:rgba(255,255,255,1);
    		border-radius:8upx;
    		border:1upx solid rgba(216,216,216,1);
    		margin-bottom: 20upx;
    	}
    	.m-view:nth-child(odd){
    		margin-right: 20upx;
    	}
    	.g-img{
    		width: 342upx;
    		height: 262upx;
    		border-radius:8upx 8upx 0upx 0upx;
    	}
    	
    	.m-title{
    		padding: 10upx;
    		font-size:24upx;
    		font-weight:500;
    		color:rgba(78,78,78,1);
    		line-height:32upx;
    	}
    	.j-view{
    		padding: 10upx;
    		font-size:26upx;
    		font-weight:500;
    		color:rgba(244,72,86,1);
    		line-height:36upx;
    	}

简单实现瀑布流，架子搭好，里面样式自己可以修改定义

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70]: /images/20230531/ee5a7c4d8be64345a600b23c5fd9d3f5.png

发表评论取消回复

表情：

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

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

相关阅读

相关 javascript 简单的瀑布流

刚开始接触js，就想写写经典的瀑布流，搜了下网上的教程，发现大多是用jquery写的，非常简单，用它也不用考虑兼容性的问题（jquery已经考虑到了），就想自己用原生的js写个

﹏ヽ暗。殇╰゛Y/ 2024年02月17日 15:16/ 0 赞/ 209 阅读

相关 Django 实现瀑布流

需求分析现在是 "图片为王"的时代，在浏览一些网站时，经常会看到类似于这种满屏都是图片。图片大小不一，却按空间排列，就这是瀑布流布局。 ![a7bf89dee6ffab3

我不是女神ヾ/ 2023年09月29日 23:51/ 0 赞/ 112 阅读

相关 CSS超简单实现瀑布流

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

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

相关原生js实现最简单的瀑布流布局

瀑布流：瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部（百度百科）

痛定思痛。/ 2023年06月05日 08:10/ 0 赞/ 153 阅读

相关简单实现瀑布流

view <view class="list-view"> <view class="m-view" v-for="(item,index) in l

短命女/ 2023年05月31日 10:16/ 0 赞/ 45 阅读

相关原生JS实现的简单“瀑布流”布局

自pinterest网站爆红以来，国内一度掀起“仿PIN”狂潮，诸如花瓣、蘑菇街等等。正是如此，“瀑布流”式布局受到广大网民的青睐。众多知名JS库，也相继出现“瀑布流”布局插件

太过爱你忘了你带给我的痛/ 2022年07月30日 14:55/ 0 赞/ 399 阅读

相关简单图片瀑布流

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

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

相关瀑布流的实现

window.onload = function()\{ waterFall("warp"); \} window.onresize = function()\{ wa

小鱼儿/ 2022年06月02日 05:57/ 0 赞/ 365 阅读

相关使用JavaScript实现简单的瀑布流

效果截图 ![SouthEast][] 基本思路每行展示固定数目的图片（假设为5），第一行从左至右依次展示5张图片，第6张放在前5张中高度最小的那张下方，

我不是女神ヾ/ 2022年06月01日 06:26/ 0 赞/ 335 阅读

相关 js简单瀑布流实现

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

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