<!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;">
<button class="button">加载更多</button>
<!-- 商品列表 -->
<div class="twoRankedBox">
<ul class="BoxLeft">
</ul>
<ul class="BoxRight">
</ul>
</div>
</body>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/mui.min.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'}
]
};
mui("body").on("tap",".button",function(e){
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>
网友评论