作者:韩晓亮2602918655 | 来源:互联网 | 2020-08-10 10:10
这篇文章给大家介绍的内容是关于瀑布流布局实现的代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
index.html
@CHARSET "UTF-8";
*{margin:0;padding:0}
#main{
position: relative;
margin: 10px auto 0 auto;
}
.box{
float:left;
padding: 0 0 15px 15px;
}
.pic{
border: 1px solid #ccc;
padding: 10px;
}
.box img{
width: 200px;
height: auto;
}
window.Onload= function(){
waterfall();
//要加载的数据,暂时写一个固定数据
var dataInt = {"data":[{"src":'3.jpg'},{"src":'13.jpg'},{"src":'23.jpg'},{"src":'1.jpg'}]};
//一个判断拖动滚动条后是否加载新内容的方法
window.Onscroll= function(){
if(checkScrollSlide()){
//将数据块渲染到当前页的尾部
for(var i = 0; i 相关文章推荐:
div标签:水平居中和垂直居中的实现(附代码)
css box-sizing属性(盒子模型)的用法介绍
以上就是瀑布流布局实现的代码的详细内容,更多请关注 第一PHP社区 其它相关文章!