JS瀑布流实现方法实例分析

本文实例分析了JS瀑布流实现方法。分享给大家供大家参考，具体如下：

描述：

1.每个图片宽度都一样，高度不一样

思路：

1.算出一共有几列（通过视窗总宽度/单个图片宽度得出）

2.根据一共几列*单个图片宽度，设置外围总宽度并水平居中（注：这个宽度应该是计算出来的，而不是定死，因为窗口大小会改变）

3.将第一行图片高度按顺序填充进数组

4.算出第一行图片里高度最短的那个，将第二行的第一张图片添加到其后(绝对定位)，添加完第二行第一张，更新他的高度，然后重新计算最短，再开始之前的过程

5.鼠标在滑动滚轮时，继续加载新的图片(注：向上滚动不会加载，也不会一滚动就加载，而是向下滚动到一个临界值时才加载)

window.onload=function(){
  waterfall('main','pin');
  var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
  window.onscroll=function(){
    if(checkscrollside()){
      var oParent = document.getElementById('main');// 父级对象
      for(var i=0;i更多关于Javascript相关内容感兴趣的读者可查看本站专题：《Javascript切换特效与技巧总结》、《Javascript图形绘制技巧总结》、《Javascript查找算法技巧总结》、《Javascript动画特效与技巧汇总》、《Javascript错误与调试技巧总结》、《Javascript数据结构与算法技巧总结》、《Javascript遍历算法与技巧总结》及《Javascript数学运算用法总结》

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