点击加载更多

作者: 加冰宝贝 | 来源:发表于2018-09-03 10:33 被阅读0次

点击加载更多
ajax点击加载更多
点击按钮加载更多
React Native刷新加载更多
需求分析：加载更多
thinkphp3.2.3的ajax加载更多
jquery列表点击加载更多
加载更多
18. 项目实战：首页开发（四）
8.30

<!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>