用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>&...
·
源博文发布于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>
代码还是一样可以直接复制用,效果图(手机扫码 - 旧的)
更多推荐
已为社区贡献10条内容
所有评论(0)