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

实现思路：创建左右两个容器，在数据导入的时候获取两个容器的高度，把即将要导入的数据，导进高度低的一个容器即可。

HTML代码

<body style="background-color: #f3f3f3;"><!-- 商品列表 --><div class="twoRankedBox"><ul class="BoxLeft"></ul><ul class="BoxRight"></ul></div>
</body>

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

几行代码轻松实现瀑布流显示。相关推荐

微信小程序,几行代码实现图片瀑布流
iPhone X效果: iPad Pro 效果: js 代码: Page({data: {list:[]},onLoad: function (options) {this.setData({list ...
小程序实现左右滑动切换菜单+瀑布流显示列表
小程序实现左右滑动列表区域,切换菜单(横向滑动菜单,切换时自动设置选中的菜单窗口居中显示),加载显示对应瀑布流数据,页面滚动时,设置菜单栏是否置顶显示自己写的一个demo(下载地址:https:// ...
adsl拨号无公网地址如何用ddns_【好玩的网络-第5期】分享自编ddns程序，17行代码轻松实现免费ddns，服务器或nas玩家的福音...
[好玩的网络]系列面向普通人的网络科普视频.我在我的哔哩哔哩账号(up主:旋律果子)更新[好玩的网络]视频版,在我的知乎(用户:曾彦)专栏更新[好玩的网络]文字版.最新消息以及预告在我的个人网站www ...
oracle行列转换关联union的方式_几行代码轻松玩转 Excel 行列转换
几行代码轻松玩转 Excel 行列转换下面这种交叉式的 Excel 表是很常见的格式,用来填写和查看都比较方便: 但是,如果想做进一步的统计分析,这种格式就不方便了,需要行列转换,变成如下格式的明细 ...
php本地文件打包代码,PHP实战：几行代码轻松实现PHP文件打包下载zip
<PHP实战:几行代码轻松实现PHP文件打包下载zip>要点: 本文介绍了PHP实战:几行代码轻松实现PHP文件打包下载zip,希望对您有用.如果有疑问,可以联系我们. PHP应用 //获 ...
python 拆分excel工作表_Python几行代码轻松拆分表格
Python几行代码轻松拆分表格作者:梅朵微信公众号:实用办公编程技能微信号:Excel-Python 什么?,Python几行代码竟然可以按指定轻松拆分表格? 将test.xls中的数据按地区 ...
html 简繁文件转换器,几行代码轻松搞定网页的简繁转换
几行代码轻松搞定网页的简繁转换以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 对网页进行简繁字体转换的方法一般有两种 ...
python按行拆分表格_Python几行代码轻松拆分表格
Python几行代码轻松拆分表格作者:梅朵微信公众号:实用办公编程技能微信号:Excel-Python 什么?,Python几行代码竟然可以按指定轻松拆分表格? 将test.xls中的数据按地区 ...
90行代码轻松实现！结合 Whisper + Stable-diffusion 的语音生成图像任务！
本项目将 Whisper 与 Stable Diffusion 模型结合,可以直接完成语音生成图像的任务.用户可以语音输入一个短句,Whisper 会自动将语音转化为文本,接着,Stable Diff ...

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

HTML代码

CSS代码

JS代码

几行代码轻松实现瀑布流显示。相关推荐

最新文章

热门文章