注册
转自 · · 1923 阅读

mui 图片实现瀑布流显示

瀑布流

原文链接：http://www.bcty365.com/content-146-5320-1.html


  1. <body style="background-color: #f3f3f3;"> 
  2.     <!-- 商品列表 --> 
  3.     <div class="twoRankedBox"> 
  4.         <ul class="BoxLeft"> 
  5.  
  6.         </ul> 
  7.  
  8.         <ul class="BoxRight"> 
  9.  
  10.         </ul> 
  11.     </div> 
  12. </body> 

  1. *{ 
  2.     padding:0px; 
  3.     margin:0px; 
  4.     list-style: none; 
  5.     font-style:normal; 
  6.     font-family: arial; 
  7.     font-family: Microsoft YaHei,arial; 
  8. } 
  9. .twoRankedBox{ 
  10.     margin:6px 8px; 
  11.     overflow: hidden; 
  12.     padding-bottom:25px; 
  13. } 
  14. .twoRankedBox ul{ 
  15.     width:49%; 
  16.     float: left; 
  17. } 
  18. .twoRankedBox ul:last-child{ 
  19.     margin-left:2%; 
  20. } 
  21. .twoRankedBox ul li{ 
  22.     padding:5px; 
  23.     margin-bottom:6px; 
  24.     padding-bottom:8px; 
  25.     background-color: #FFFFFF; 
  26. } 
  27. .twoRankedBox ul li p:first-child{ 
  28.     padding-top:0px; 
  29. } 
  30. .twoRankedBox ul li p{ 
  31.     padding-top:4px; 
  32. } 
  33. .product_picture img{ 
  34.     display: block; 
  35.     width:100%; 
  36. } 
  37. .product_np{ 
  38.     overflow: hidden; 
  39.     line-height:20px; 
  40. } 
  41. .product_np a{ 
  42.     display: block; 
  43.     overflow:hidden; 
  44.     text-overflow:ellipsis; 
  45.     white-space:nowrap; 
  46. } 
  47. .product_np a:first-child{ 
  48.     font-size:0.9em; 
  49.     color:#58b7e3; 
  50.     width:65%; 
  51.     float: left; 
  52. } 
  53. .product_np a:last-child{ 
  54.     font-size:0.8em; 
  55.     color:#f00; 
  56.     float: right; 
  57.     width:35%; 
  58.     text-align: right; 
  59. } 
  60. .product_ie{ 
  61.     font-size:0.8em; 
  62.     color:#777; 
  63. } 
  1. for(var i=0;i<json.data.length;i++){ 
  2.     var chtml = '<li><p class="product_picture"><img src="'+json.data[i].src+'"></p>' 
  3.             +'<p class="product_np"><a>'+json.data[i].name+'</a><a>￥'+json.data[i].price+'</a></p>' 
  4.             +'<p class="product_ie">'+json.data[i].details+'</p></li>' 
  5.  
  6.     if($('.BoxLeft').height() < $('.BoxRight').height()){ 
  7.         $('.BoxLeft').append(chtml); 
  8.     }else{ 
  9.         $('.BoxRight').append(chtml); 
  10.     } 
  11. }