移动端瀑布流

最新推荐文章于 2024-05-10 22:50:23 发布

个人看法

最新推荐文章于 2024-05-10 22:50:23 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/webZRH/article/details/75039762

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>社区</title>
<link href="../css/mui.min.css" rel="stylesheet"/>
</head>
<style type="text/css">
*{
padding:0px;
margin:0px;
list-style: none;
font-style:normal;
font-family: arial;
font-family: Microsoft YaHei,arial;
}
.twoRankedBox{
margin:6px 8px;
overflow: hidden;
padding-bottom:25px;
}
.twoRankedBox ul{
width:49%;
float: left;
}
.twoRankedBox ul:last-child{
margin-left:2%;
}
.twoRankedBox ul li{
padding:5px;
margin-bottom:6px;
padding-bottom:8px;
background-color: #FFFFFF;
}
.twoRankedBox ul li p:first-child{
padding-top:0px;
}
.twoRankedBox ul li p{
padding-top:4px;
}
.product_picture img{
display: block;
width:100%;
}
.product_np{
overflow: hidden;
line-height:20px;
}
.product_np a{
display: block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.product_np a:first-child{
font-size:0.9em;
color:#58b7e3;
width:65%;
float: left;
}
.product_np a:last-child{
font-size:0.8em;
color:#f00;
float: right;
width:35%;
text-align: right;
}
.product_ie{
font-size:0.8em;
color:#777;
}
</style>
<body style="background-color: #f3f3f3;">

<div class="twoRankedBox">
<ul class="BoxLeft">

</ul>

<ul class="BoxRight">

</ul>
</div>
</body>
<script src="../js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var json = {
data:[
{name:'花瓣小小裙花瓣',price:'128',details:'质量超好特别的舒适，夏天首选。',src:'http://www.jq22.com/demo/jQueryWaterfallFlow20160830/img/01.jpg'},
{name:'时尚牛仔短裤',price:'298',details:'质量超好特别的舒适，夏天首选。',src:'http://www.jq22.com/demo/jQueryWaterfallFlow20160830/img/02.jpg'},
{name:'白色婚纱',price:'668',details:'质量超好特别的舒适，夏天首选。',src:'http://www.jq22.com/demo/jQueryWaterfallFlow20160830/img/03.jpg'},
{name:'绿色防晒衣',price:'218',details:'质量超好特别的舒适，夏天首选。',src:'http://www.jq22.com/demo/jQueryWaterfallFlow20160830/img/04.jpg'},
{name:'格纹小短裙',price:'88',details:'质量超好特别的舒适，夏天首选。',src:'http://www.jq22.com/demo/jQueryWaterfallFlow20160830/img/05.jpg'},
{name:'复古旗袍',price:'128',details:'质量超好特别的舒适，夏天首选。',src:'http://www.jq22.com/demo/jQueryWaterfallFlow20160830/img/06.jpg'},
{name:'花瓣小小裙花瓣',price:'128',details:'质量超好特别的舒适，夏天首选。',src:'http://www.jq22.com/demo/jQueryWaterfallFlow20160830/img/07.jpg'},
{name:'时尚牛仔短裤',price:'298',details:'质量超好特别的舒适，夏天首选。',src:'http://www.jq22.com/demo/jQueryWaterfallFlow20160830/img/08.jpg'},
{name:'白色婚纱',price:'668',details:'质量超好特别的舒适，夏天首选。',src:'http://www.jq22.com/demo/jQueryWaterfallFlow20160830/img/01.jpg'},
{name:'绿色防晒衣',price:'218',details:'质量超好特别的舒适，夏天首选。',src:'http://www.jq22.com/demo/jQueryWaterfallFlow20160830/img/02.jpg'},
{name:'格纹小短裙',price:'118',details:'质量超好特别的舒适，夏天首选。',src:'http://www.jq22.com/demo/jQueryWaterfallFlow20160830/img/03.jpg'}
]
};
for(var i=0;i<json.data.length;i++){
var chtml = '<li><p class="product_picture"><img src="'+json.data[i].src+'"></p>'
+'<p class="product_np"><a>'+json.data[i].name+'</a><a>￥'+json.data[i].price+'</a></p>'
+'<p class="product_ie">'+json.data[i].details+'</p></li>'

if($('.BoxLeft').height() < $('.BoxRight').height()){
$('.BoxLeft').append(chtml);
}else{
$('.BoxRight').append(chtml);
}
}
</script>
</body>
</html>

个人看法

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端瀑布流

社区 *{ padding:0px; margin:0px; list-style: none; font-style:normal; font-family: arial; font-family: Microsoft YaHei,arial; } .twoRankedBox{ ma
复制链接

扫一扫