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

曾经终败给现在 2022-05-08 11:28 238阅读 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>

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

[70]: /images/20220508/141c7dacfce244df8341b2ced8f74dc4.png