基于JavaScript实现瀑布流布局(二)_javascript技巧

1.建立Html模版

想法是先用一个div container承载所有内容,然后div box用来放置图片,最后div box_border来当图片框,代码如下

2.通过css简单设置样式

主要设置水平放置,相框颜色,边界之类的

/*
边界不留空,背景黑灰
*/
body{
 margin: 0px;
 background: darkgray;
}
/*
总布局设置为相对布局
*/
.container{
 position: relative;
}
/*
设置box属性
*/
.box{
 padding: 5px;
 float: left;
}
/*设置图片边框阴影和圆角
*/
.box_border{
 padding: 5px;
 border: 1px solid #cccccc;
 box-shadow: 0px 0px 5px #ccc;
 border-radius: 5px;
}
/*设置图片格式*/
.box_border img{
 width: 150px;
 height: auto;
}

3.JS控制每一行所摆放的图片个数

上面的css布局之后,浏览器窗口大小改变,里面的图片数量也会改变,现在要用JS固定住每一行的图片数量,对于不同尺寸的屏幕都能做到很好的效果

4.JS实现静态瀑布流

先实现静态的布局,也就是浏览器下拉不会自动刷新出新的图片.
实现排列算法很简单

代码:

5.js实现动态加载

动态加载也就是滚动条永远滑不到底部,要解决动态加载我们需要考虑两个问题:
1）.什么时候加载?
滑动距离+浏览器高度>最后一张图片距离顶部的距离
2）.怎样加载?
通过创建新的节点,把创建的节点添加进去即可
最终代码:

希望本文所述对大家学习javascript程序设计有所帮助。