!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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="'+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>
作者：释怀Believemin
链接：https://www.jianshu.com/p/5587e371b66d
共同学习，写下你的评论
评论加载中...
作者其他优质文章
