點擊加載更多

<!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>社區(qū)</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:'質(zhì)量超好特別的舒適履磨，夏天首選。',src:'http://www.jq22.com/demo/jQueryWaterfallFlow20160830/img/01.jpg'}, 
        {name:'時尚牛仔短褲',price:'298',details:'質(zhì)量超好特別的舒適庆尘，夏天首選剃诅。',src:'http://www.jq22.com/demo/jQueryWaterfallFlow20160830/img/02.jpg'}, 
        {name:'白色婚紗',price:'668',details:'質(zhì)量超好特別的舒適，夏天首選驶忌。',src:'http://www.jq22.com/demo/jQueryWaterfallFlow20160830/img/03.jpg'}, 
        {name:'綠色防曬衣',price:'218',details:'質(zhì)量超好特別的舒適矛辕，夏天首選。',src:'http://www.jq22.com/demo/jQueryWaterfallFlow20160830/img/04.jpg'}, 
        {name:'格紋小短裙',price:'88',details:'質(zhì)量超好特別的舒適付魔，夏天首選聊品。',src:'http://www.jq22.com/demo/jQueryWaterfallFlow20160830/img/05.jpg'}, 
        {name:'復(fù)古旗袍',price:'128',details:'質(zhì)量超好特別的舒適，夏天首選几苍。',src:'http://www.jq22.com/demo/jQueryWaterfallFlow20160830/img/06.jpg'}, 
        {name:'花瓣小小裙花瓣',price:'128',details:'質(zhì)量超好特別的舒適翻屈，夏天首選。',src:'http://www.jq22.com/demo/jQueryWaterfallFlow20160830/img/07.jpg'}, 
        {name:'時尚牛仔短褲',price:'298',details:'質(zhì)量超好特別的舒適妻坝，夏天首選伸眶。',src:'http://www.jq22.com/demo/jQueryWaterfallFlow20160830/img/08.jpg'}, 
        {name:'白色婚紗',price:'668',details:'質(zhì)量超好特別的舒適惊窖，夏天首選。',src:'http://www.jq22.com/demo/jQueryWaterfallFlow20160830/img/01.jpg'}, 
        {name:'綠色防曬衣',price:'218',details:'質(zhì)量超好特別的舒適赚抡，夏天首選爬坑。',src:'http://www.jq22.com/demo/jQueryWaterfallFlow20160830/img/02.jpg'}, 
        {name:'格紋小短裙',price:'118',details:'質(zhì)量超好特別的舒適，夏天首選涂臣。',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>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末盾计，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子赁遗，更是在濱河造成了極大的恐慌署辉，老刑警劉巖，帶你破解...
    沈念sama閱讀 219,539評論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件岩四，死亡現(xiàn)場離奇詭異哭尝，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)剖煌，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,594評論 3贊 396
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門材鹦，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人耕姊，你說我怎么就攤上這事桶唐。” “怎么了茉兰？”我有些...
    開封第一講書人閱讀 165,871評論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵尤泽，是天一觀的道長。 經(jīng)常有香客問我规脸，道長坯约，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,963評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任莫鸭，我火速辦了婚禮闹丐，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘被因。我一直安慰自己妇智，他們只是感情好，可當(dāng)我...
    茶點故事閱讀 67,984評論 6贊 393
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布氏身。 她就那樣靜靜地躺著巍棱，像睡著了一般。 火紅的嫁衣襯著肌膚如雪蛋欣。 梳的紋絲不亂的頭發(fā)上航徙，一...
    開封第一講書人閱讀 51,763評論 1贊 307
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音陷虎，去河邊找鬼到踏。 笑死杠袱，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的窝稿。 我是一名探鬼主播楣富，決...
    沈念sama閱讀 40,468評論 3贊 420
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼伴榔！你這毒婦竟也來了纹蝴？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 39,357評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤踪少，失蹤者是張志新（化名）和其女友劉穎塘安，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體援奢，經(jīng)...
    沈念sama閱讀 45,850評論 1贊 317
  • ?護(hù)林員之死
    正文 獨居荒郊野嶺守林人離奇死亡兼犯，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,002評論 3贊 338
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了集漾。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片切黔。...
    茶點故事閱讀 40,144評論 1贊 351
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖具篇，靈堂內(nèi)的尸體忽然破棺而出纬霞，到底是詐尸還是另有隱情，我是刑警寧澤栽连，帶...
    沈念sama閱讀 35,823評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布儒鹿，位于F島的核電站衣盾，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏透乾。R本人自食惡果不足惜挨下，卻給世界環(huán)境...
    茶點故事閱讀 41,483評論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一熔恢、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧臭笆，春花似錦叙淌、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,026評論 0贊 22
  • 一樁弒父案鹰霍，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至茵乱，卻和暖如春茂洒，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背瓶竭。 一陣腳步聲響...
    開封第一講書人閱讀 33,150評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工督勺， 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留渠羞，地道東北人。 一個月前我還...
    沈念sama閱讀 48,415評論 3贊 373
  • 代替公主和親
    正文 我出身青樓智哀，卻偏偏與公主長得像次询，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子瓷叫，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,092評論 2贊 355

推薦閱讀更多精彩內(nèi)容