當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

几行代码轻松实现瀑布流显示。

發布時間：2025/3/15 编程问答 11 豆豆

生活随笔收集整理的這篇文章主要介紹了几行代码轻松实现瀑布流显示。小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

實現思路：創建左右兩個容器，在數據導入的時候獲取兩個容器的高度，把即將要導入的數據，導進高度低的一個容器即可。

HTML代碼

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; }

JS代碼

//模擬JSON數據 var json = {data:[{name:'花瓣小小裙花瓣',price:'128',details:'質量超好特別的舒適，夏天首選。',src:'images/temporary/img_01.jpg'},{name:'時尚牛仔短褲',price:'298',details:'質量超好特別的舒適，夏天首選。',src:'images/temporary/img_02.jpg'},{name:'白色婚紗',price:'668',details:'質量超好特別的舒適，夏天首選。',src:'images/temporary/img_03.jpg'},{name:'綠色防曬衣',price:'218',details:'質量超好特別的舒適，夏天首選。',src:'images/temporary/img_04.jpg'},{name:'格紋小短裙',price:'88',details:'質量超好特別的舒適，夏天首選。',src:'images/temporary/img_05.jpg'},{name:'復古旗袍',price:'128',details:'質量超好特別的舒適，夏天首選。',src:'images/temporary/img_06.jpg'},{name:'花瓣小小裙花瓣',price:'128',details:'質量超好特別的舒適，夏天首選。',src:'images/temporary/img_07.jpg'},{name:'時尚牛仔短褲',price:'298',details:'質量超好特別的舒適，夏天首選。',src:'images/temporary/img_08.jpg'},{name:'白色婚紗',price:'668',details:'質量超好特別的舒適，夏天首選。',src:'images/temporary/img_09.jpg'},{name:'綠色防曬衣',price:'218',details:'質量超好特別的舒適，夏天首選。',src:'images/temporary/img_10.jpg'},{name:'格紋小短裙',price:'118',details:'質量超好特別的舒適，夏天首選。',src:'images/temporary/img_11.jpg'}] }//模擬數據導入 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);} } 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的几行代码轻松实现瀑布流显示。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。