//瀑布流/信息流简易布局{布局分为左右两列排版}
1-优点：粘贴复制代码，小程序，H5通用，绝对满足80%需求
2-缺点：代码逻辑复杂用臃肿
3-分析实现思路：
---1.布局为左右两列布局样式
===left{状态显示两种：
--1长图形态显示
--2短图形态显示}
===right
{1长图形态显示
-2短图形态显示}
---2.数据源JSON数据List[]，通过状态区分划分为left1[],right1[]
===例如JS
var list=[{...}];后台传递过来的JSON数据
//声明两个新数组
var left1=[],right1=[];
//循环判断分别追加到left1，right1数组
for(var i in list){
if(i%2==0){
left1.push(list[i]);
}
if(i%2!=0){
right1.push(list[i]);
}
}
===页面渲染中继续使用index%2==0,index%2!=0这样显示区分//如图所示效果
//直接上代码吧，我不是个能扯皮的人，也不啰嗦
<html style="font-size: 312.5%;">
<head>
<meta content="yes" name="apple-touch-fullscreen">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
<title>购物</title>
<style type="text/css">
html,
body {
padding: 0px;
margin: 0 auto;
background-color: #f5f5f5;
}
[v-cloak] {
display: none !important;
}
.m-lookBlock {
width: 3.45rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: .2rem;
border-radius: .16rem;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
}
.m-videoIconWrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.m-videoIcon {
width: .80rem;
height: .80rem;
}
.m-lookDesc {
width: 3.43rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: .18rem .16rem 0;
color: #333;
font-size: .28rem;
line-height: .4rem;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
lines: 2;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-family: 'PingFangSC-Regular';
background-color: #fff;
text-align: left;
}
.m-lookDetail {
width: 3.43rem;
font-size: .24rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: .17rem .16rem .24rem;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
background-color: #fff;
}
.u-placeHolder {
width: 3.43rem;
height: .17rem;
background-color: #fff;
}
.m-lookImageWrapper {
position: relative;
background-color: #f2f2f2;
}
.m-lookImageWrapper .m-image {
width: 100%;
}
.m-userInfo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: right;
-ms-flex-pack: right;
justify-content: right;
}
.m-userpic {
width: .48rem;
height: .48rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: .24rem;
border: 1px solid #d9d9d9;
}
.m-userName {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .22rem;
color: #7f7f7f;
height: .48rem;
line-height: .48rem;
margin-left: .08rem;
}
.m-upArea {
width: 1rem;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.m-upText {
font-size: .24rem;
color: #7f7f7f;
max-width: .9rem;
text-align: right;
height: .32rem;
line-height: .32rem;
margin-left: .02rem;
}
.m-hand {
width: .32rem;
height: .32rem;
}
.m-singleGoods {
width: 3.43rem;
background: #FFF;
font-family: 'PingFangSC-Light';
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.m-singleGoods .u-singleGoods {
width: 3.05rem;
border-top: .5px solid #d9d9d9;
margin: 0 auto;
padding-top: .2rem;
padding-bottom: .2rem;
}
.m-singleGoods .u-singleGoods .u-goodsname {
vertical-align: middle;
display: inline-block;
width: 2.07rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .22rem;
color: #333333;
line-height: .32rem;
height: .32rem;
}
.m-singleGoods .u-singleGoods .u-goBuy {
/* display: inline-block;
vertical-align: baseline;
vertical-align: middle;
width: .88rem;
height: .32rem;
overflow: hidden;
text-align: right;
position: relative;
right: -.1rem; */
/* display: inline-block; */
/* vertical-align: baseline; */
/* vertical-align: middle; */
/* width: .88rem; */
height: .32rem;
overflow: hidden;
text-align: right;
position: relative;
right: -.1rem;
top: -0.3rem;
}
.m-singleGoods .u-singleGoods .u-goBuy .u-buyText {
display: inline-block;
vertical-align: top;
font-size: .22rem;
color: #DD1A21;
line-height: .32rem;
height: .32rem;
}
.m-singleGoods .u-singleGoods .u-goBuy .u-arrow {
width: .1rem;
height: .18rem;
line-height: .32rem;
margin-left: .04rem;
display: inline-block;
vertical-align: baseline;
position: relative;
top: -.04rem;
}
.m-collectionInfo {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: .28rem .18rem .36rem .18rem;
}
.m-collectionIcon {
position: absolute;
left: .2rem;
bottom: .2rem;
width: .37rem;
height: .29rem;
}
.m-collectionTitle {
display: block;
width: 3.09rem;
font-size: .32rem;
font-weight: bold;
color: #333;
line-height: .48rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
lines: 1;
-webkit-line-clamp: 1;
text-align: center;
}
.m-collectionLine {
display: block;
width: .48rem;
height: .04rem;
margin: 0 auto;
background: #333;
margin-top: .21rem;
margin-bottom: .24rem;
}
.m-collectionText {
width: 3.09rem;
margin-top: .18rem;
font-size: .24rem;
line-height: .36rem;
color: #333;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
lines: 2;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-align: center;
}
.m-collectBgDefault {
background-color: #f4f4f4;
}
.m-collectBg0 {
background-color: #FFE1B2;
}
.m-collectBg1 {
background-color: #FFCABE;
}
.m-collectBg2 {
background-color: #F6D9FF;
}
.m-collectBg3 {
background-color: #D7DEFA;
}
.m-collectBg4 {
background-color: #C4E2FF;
}
.m-innerWrapper {
width: 3.45rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: .16rem;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
}
.m-wrapper2 {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #eeeeee;
}
.m-lookList {
width: 7.1rem;
min-height: 10rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
margin: 0 auto;
margin-top: 0.3rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.m-lookColumn {
width: 3.45rem;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
</style>
</head>
<body class="content">
<div id="app">
<div class="m-wrappers">
<div class="m-lookList">
<div class="m-lookColumn">
<div class="m-lookBlock m-shadow" v-for="(item,index) in list1" v-if="index%2==0" v-cloak>
<div class="m-innerWrapper">
<div>
<div>
<div class="m-lookImageWrapper" style="width: 3.45rem;"><img
:src="item.img" class="m-image" style="width: 3.45rem;">
<!---->
</div>
<div class="m-lookDesc">{{item.title}}</div>
<div class="u-placeHolder"></div>
<div class="m-lookDetail">
<div class="m-userInfo">
<img src="http://yanxuan.nosdn.127.net/ffe2a907c0bcef00f366be066f5a2a71.jpg?imageView&quality=65&thumbnail=48y48"
class="m-userpic">
<div class="m-userName">{{item.username}}</div>
</div>
<div class="m-upArea"><img src=
class="m-hand">
<div class="m-upText">{{item.num}}</div>
</div>
</div>
<div class="m-singleGoods">
<div class="u-singleGoods">
<div class="u-goodsname">{{item.content}}</div>
<div class="u-goBuy"><span class="u-buyText">去购买</span><img src="1"
class="u-arrow"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end -->
<div class="m-lookBlock m-shadow" v-for="(item,index) in list1" v-if="index%2!=0" v-cloak>
<div class="m-innerWrapper">
<div>
<div>
<div class="m-lookImageWrapper" style="width: 3.45rem;"><img
:src="item.img" class="m-image" style="width: 3.45rem;">
<!---->
</div>
<div data-yxstat="{"event_name":"click_recognition_recommendcontent","event_action":"click","page_name":"recognition","parameters":{"topicId":"114918","extra":"","type":1}}"
class="m-lookDesc">{{item.title}}</div>
<div class="u-placeHolder"></div>
<div class="m-lookDetail">
<div class="m-userInfo"><img :src="item.img" class="m-userpic">
<div class="m-userName">选妹</div>
</div>
<div class="m-upArea"><img src=
class="m-hand">
<div class="m-upText">{{item.num}}</div>
</div>
</div>
<!---->
</div>
</div>
</div>
</div>
<!-- end -->
</div>
<div class="m-lookColumn">
<div class="m-lookBlock m-shadow" v-for="(item,index) in list2" v-if="index%2==0" v-cloak>
<div class="m-innerWrapper">
<div>
<div>
<div data-yxstat="{"event_name":"click_recognition_recommendcontent","event_action":"click","page_name":"recognition","parameters":{"topicId":"114976","extra":"","type":1}}"
class="m-lookImageWrapper" style="width: 3.45rem;"><img
:src="item.img" class="m-image" style="width: 3.45rem;">
<!---->
</div>
<div data-yxstat="{"event_name":"click_recognition_recommendcontent","event_action":"click","page_name":"recognition","parameters":{"topicId":"114976","extra":"","type":1}}"
class="m-lookDesc">{{item.title}}</div>
<div class="u-placeHolder"></div>
<div class="m-lookDetail">
<div class="m-userInfo">
<img :src="item.img" class="m-userpic">
<div class="m-userName">选购指南</div>
</div>
<div class="m-upArea"><img src=
class="m-hand">
<div class="m-upText">{{item.num}}</div>
</div>
</div>
<!---->
</div>
</div>
</div>
</div>
<div class="m-lookBlock m-shadow" v-for="(item,index) in list2" v-if="index%2!=0" v-cloak>
<div class="m-innerWrapper">
<div>
<div>
<div class="m-lookImageWrapper" style="width: 3.45rem;">
<img :src="item.img" class="m-image" style="width: 3.45rem;">
<!---->
</div>
<div data-yxstat="{"event_name":"click_recognition_recommendcontent","event_action":"click","page_name":"recognition","parameters":{"topicId":"114945","extra":"","type":2}}"
class="m-lookDesc">{{item.title}}</div>
<div class="u-placeHolder"></div>
<div class="m-lookDetail">
<div class="m-userInfo">
<img :src="item.img" class="m-userpic">
<div class="m-userName">{{item.username}}</div>
</div>
<div class="m-upArea"><img src=
class="m-hand">
<div class="m-upText">{{item.num}}</div>
</div>
</div>
<div class="m-singleGoods">
<div class="u-singleGoods">
<div class="u-goodsname">{{item.content}}</div>
<div class="u-goBuy"><span class="u-buyText">去购买</span><img src="1"
class="u-arrow"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end -->
</div>
</div>
</div>
</div>
</div>
<!---->
</div>
<script src="./js/jquery-1.8.3.js"></script>
<script src="./js/vue.js"></script>
<script src="./js/vant.min.js"></script>
<!-- 根数据 -->
<script>
new Vue({
el: '#app',
data: {
mgoodList: [{
id: 1,
img: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3347864069,1662258004&fm=26&gp=0.jpg",
leaver: 1,
title: "中医小白轻松上手，无烟便携艾灸盒",
content: "简易瀑布流布局，你们可以参考一下",
price: "349",
num: 10,
username:"菜鸟老五",
oldPrice: "789",
label: ["特价", "限时优惠"]
},
{
id: 2,
img: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2789532059,1192373501&fm=26&gp=0.jpg",
leaver: 2,
title: "中医小白轻松上手，无烟便携艾灸盒",
content: "简易瀑布流布局，你们可以参考一下",
price: "49",
oldPrice: "89",
username:"菜鸟老五",
num: 100,
label: ["新人特价"]
},
{
id: 3,
img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3915220323,4170882301&fm=26&gp=0.jpg",
leaver: 3,
title: "中医小白轻松上手，无烟便携艾灸盒",
content: "简易瀑布流布局，你们可以参考一下",
price: "159",
num: 100,username:"菜鸟老五",
oldPrice: "369",
label: ["折扣优惠"]
},
{
id: 4,
img: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1676365759,391237942&fm=26&gp=0.jpg",
leaver: 4,
title: "中医小白轻松上手，无烟便携艾灸盒",
content: "简易瀑布流布局，你们可以参考一下",
price: "29",
username:"菜鸟老五",
num: 100,
oldPrice: "69",
label: ["限时优惠"]
},
{
id: 5,
img: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=947016362,1269262802&fm=26&gp=0.jpg",
leaver: 5,
title: "中医小白轻松上手，无烟便携艾灸盒",
content: "简易瀑布流布局，你们可以参考一下",
price: "19",
num: 100,
username:"菜鸟老五",
oldPrice: "69",
label: ["限时优惠"]
},
{
id: 6,
img: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2715504132,2191984566&fm=26&gp=0.jpg",
leaver: 6,
title: "中医小白轻松上手，无烟便携艾灸盒",
content: "简易瀑布流布局，你们可以参考一下",
price: "349",
username:"菜鸟老五",
num: 100,
oldPrice: "69",
label: ["限时优惠"]
},
{
id: 7,
img: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3809412232,1951312228&fm=26&gp=0.jpg",
leaver: 7,
title: "中医小白轻松上手，无烟便携艾灸盒",
content: "简易瀑布流布局，你们可以参考一下",
price: "349",
username:"菜鸟老五",
oldPrice: "69",
num: 100,
label: ["限时优惠"]
},
{
id: 8,
img: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=103206442,1369863903&fm=26&gp=0.jpg",
leaver: 8,
title: "中医小白轻松上手，无烟便携艾灸盒",
content: "简易瀑布流布局，你们可以参考一下",
price: "349",
oldPrice: "69",
username:"菜鸟老五",
num: 100,
label: ["限时优惠"]
},
{
id: 9,
img: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1055672774,1388531180&fm=26&gp=0.jpg",
leaver: 9,
title: "中医小白轻松上手，无烟便携艾灸盒",
content: "简易瀑布流布局，你们可以参考一下",
price: "349",
num: 100,
username:"菜鸟老五",
oldPrice: "69",
label: ["限时优惠"]
},
{
id: 10,
img: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=485381036,160597217&fm=26&gp=0.jpg",
leaver: 10,
title: "中医小白轻松上手，无烟便携艾灸盒",
content: "简易瀑布流布局，你们可以参考一下",
price: "349",
username:"菜鸟老五",
num: 100,
oldPrice: "69",
label: ["限时优惠"]
}
],
list1: [],
list2: []
},
mounted() {
var that = this;
that.initData();
},
methods: {
/**
* 初始化加载数据
* @ param {注意}
* 这里的这个mgoodList数据是后台返回或者自定义的数据
* list1左列数据
* list2右列数据
* 通过I%2这样分别push近list1，list2
* **/
initData() {
var that = this;
var mgoodList = that.mgoodList;
var list1 = that.list1;
var list2 = that.list2;
for (var i in mgoodList) {
if (i % 2 == 0) {
list1.push(mgoodList[i]);
}
if (i % 2 != 0) {
list2.push(mgoodList[i]);
}
}
that.list1 = list1;
that.list2 = list2;
}
}
})
</script>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
