用vue写了个瀑布流布局，看着还可以

最新推荐文章于 2024-06-06 14:25:46 发布

攻城狮YanGo

最新推荐文章于 2024-06-06 14:25:46 发布

阅读量9.9k

点赞数 6

分类专栏： web前端 vue

本文链接：https://blog.csdn.net/weixin_39644462/article/details/83013239

版权

web前端同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

vue

19 篇文章 0 订阅

订阅专栏

源博文发布于2018-10-11 (由于收到建议，在vue中v-for的优先级高于v-if的优先级，这意味着`v-if` 将分别重复运行于每个 `v-for` 循环中所以，不推荐v-if和v-for同时使用)

2019-6-1【最新更改的代码】，并未通过v-if来判断拆分左右两部分布局，而是通过css来达到瀑布流效果，下面为最新代码，可以直接复制使用。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimum-scale=1.0">
		<title>vue瀑布流布局</title>
		<script type="text/javascript" src="http://www.xxiaoyuan.top/jquery-1.9.1.js"></script>
		<style>
			[v-cloak]{
			display: none!important;
		}
		*{
			padding: 0;
			margin: 0;
			list-style-type: none;
		}
		body{
			width: 95%;
			margin: 10px auto;
			background: #efefef;
			min-height: 100vh;
		}
		.pubu{
			width: calc(100% - 16px);
			margin-left: 8px;
		}
		.yg img{
			width:100%;
			border-radius: 8px 8px 0 0;
		}
		.yg p{
			margin-top: 10px;
			padding: 0 8px;
			width: calc(100% - 16px);
			font-size: 0.75rem;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			color: #999;
		}
		.yg {
			column-count:2;
		}
		.yg li{
			-moz-page-break-inside:avoid;
			-webkit-column-break-inside:avoid;
			break-inside:avoid;
			margin-bottom: 10px;
			background: #fff;
			border-radius: 8px;
			padding-bottom: 10px;
			box-shadow: 0 0 5px rgba(0,0,0,.1);
		}
		.yg li .item_div{
			position: relative;
		}
		.u_xinx{
			position: absolute;
			bottom: 4px;
		}
		.u_xinx img{
			margin-left: 5px;
			background: rgba(0,0,0,.2);
			box-shadow: 0 1px 3px rgba(0,0,0,.5);
			width: 26px;
			height: 26px;
			border-radius: 50%;
			display: inline-block;
		}
		.u_xinx span{
			position: relative;
			text-shadow: 0 1px 1px #333;
			top: -8px;
			color: #fff;
			font-size: 0.6rem;
		}

	</style>
	</head>
	<body>
		<div id="vm" class="pubu" v-cloak>
			<ul id="show" class="yg yg_l">
				<li v-for="(item,index) in showwz">
					<div class="item_div">
						<img :src="item.e_img" alt="">
						<div class="u_xinx">
							<img :src="item.u_img" alt="">
							<span>{{item.u_name}}</span>
						</div>
					</div>
					<p>{{item.e_intro}}</p>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript" src="http://www.xxiaoyuan.top/vue.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#vm",
			data: {
				showwz: []
			},
			computed: {},
			methods: {
				getwz: function() {
					var that = this;
					$.ajax({
						url: "http://xxiaoyuan.top/controller/wz/wz.php",
						type: "POST",
						dataType: "json",
						data: {
							u_id: 512,
						},
						success: function(res) {
							console.log(res);
							that.showwz = res.data;
						}
					});
				}
			},
			mounted: function() {
				this.getwz();
			}
		});
	</script>
</html>

【原旧的代码】，是通过v-if = index% == 0 和 v-if = index% == 1 将布局拆分左右两个部分再做浮动(不建议使用)

在学vue的路上，学了些基础，验收一下学习爱的成果。写了个简单的瀑布流布局，当作记录一下学习过程。适合新手们，比较简单易上手，不废话了，上代码。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimum-scale=1.0">
	<title>vue瀑布流布局</title>
	<script type="text/javascript" src="http://www.xxiaoyuan.top/jquery-1.9.1.js"></script>
	<style>
		[v-cloak]{
			display: none!important;
		}
		*{
			padding: 0;
			margin: 0;
			list-style-type: none;
		}
		body{
			width: 95%;
			margin: 10px auto;
		}
		.pubu{
            width: calc(100% - 16px);
            margin-left: 8px;
        }
        .yg img{
            width:100%;
            border-radius: 8px 8px 0 0;
        }
        .yg p{
            width: 100%;
            font-size: 0.75rem;
            padding:3px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            color: #999;
        }
        .yg_l , .yg_r{
            width: calc(50% - 5px);
        }
        .yg li{
            background: #fff;
            border-radius: 8px;
            margin-bottom: 10px;
            box-shadow: 0 0 5px #999;
        }
        .yg_l{
            float: left;
        }
        .yg_r{
            float: right;
        }
		.u_xinx{
	        position: absolute;
	        bottom: 4px;
	    }
	    .u_xinx img{
	        margin-left: 5px;
	        background: rgba(0,0,0,.2);
	        box-shadow: 0 1px 3px rgba(0,0,0,.5);
	        width: 26px;
	        height: 26px;
	        border-radius: 50%;
	        display: inline-block;
	    }
	    .u_xinx span{
	        position: relative;
	        text-shadow: 0 1px 1px #333;
	        top: -8px;
	        color: #fff;
	        font-size: 0.6rem;
	    }

	</style>
</head>
<body>
	<div id="vm" class="pubu" v-cloak>
		<ul id="show" class="yg yg_l">
			<li v-for="(item,index) in showwz" v-if="index%2==0">
				<div style="position: relative;">
		            <img :src="item.e_img" alt="">
		            <div class="u_xinx">
		                <img :src="item.u_img" alt="">
		                <span>{{item.u_name}}</span>
		            </div>
		        </div>
				<p>{{item.e_intro}}</p>
			</li>
		</ul>
		<ul class="yg yg_r">
			<li v-for="(item,index) in showwz" v-if="index%2==1" >
				<div style="position: relative;">
		            <img :src="item.e_img" alt="">
		            <div class="u_xinx">
		                <img :src="item.u_img" alt="">
		                <span>{{item.u_name}}</span>
		            </div>
		        </div>
				<p>{{item.e_intro}}</p>
			</li>
		</ul>
		<div style="clear: both;"></div>
	</div>
</body>
<script type="text/javascript" src="http://www.xxiaoyuan.top/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
		el:"#vm",
		data:{
    		showwz:[],
    		wznum:''
    	},
    	methods:{
    		getwz:function(){
	            var that = this;
    			$.ajax({
			        url:"http://xxiaoyuan.top/controller/wz/wz.php",
			        type:"POST",
			        dataType:"json",
			        data:{
			            u_id:512,
			        },
			        success:function(res){
			            console.log(res);
			            that.showwz = res.data;
			            that.wznum = res.data.length;
			        }
			    });
    		}
    	},
    	mounted:function(){
    		this.getwz();
    	}
    });
</script>
</html>

代码还是一样可以直接复制用，效果图(手机扫码 - 旧的)

攻城狮YanGo

关注

6
点赞
踩
15

收藏

觉得还不错? 一键收藏
14
评论
用vue写了个瀑布流布局，看着还可以

源博文发布于2018-10-11 (由于收到建议，在vue中v-for的优先级高于v-if的优先级，这意味着v-if将分别重复运行于每个v-for循环中所以，不推荐v-if和v-for同时使用)2019-6-1【最新更改的代码】，并未通过v-if来判断拆分左右两部分布局，而是通过css来达到瀑布流效果，下面为最新代码，可以直接复制使用。<!DOCTYPE html>&...
复制链接

扫一扫