您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

原生js瀑布流与无限滚动加载（已解决极客学院老师的bug）

发布时间：2016-08-30 10:00:30编辑：雪饮阅读（）

 瀑布流就是像瀑布一样的网站——丰富的网站内容，特别是绚美的图片会让你流连忘返。你在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。瀑布流网站是新兴的一种网站模式——她的典型代表是pinterest、美丽说、蘑菇街这类型的网站。

本次分享的是极客学院老师所讲的瀑布流与滚动加载。其实极客学院老师当时的那个demo是有一点小问题的。例如你改变了浏览器窗口大小的时候就会导致重叠瀑布流的现象，滚动加载时也是同样的。这个估计也是老师太忙吧，学生的问答老师并没有给予回复。雪饮后来分析了一下。当浏览器窗口发生变化时定位也势必会影响到，而瀑布流的核心便是定位。

那么问题的症结分析出来了，就需要对症下药。我们监听浏览器的窗口改变事件，当浏览器窗口大小改变了就将所有的定位信息全部置为默认并重新瀑布流布局即可。解决此问题的核心代码如下：

window.onresize=function(){ 

var parent=document.getElementById("container");

var cparent=parent.getElementsByTagName('*');

for(var i=0;i<cparent.length;i++){

if(cparent[i].className=="box"){

cparent[i].style.cssText="";

}

}

             imgLocation('container','box');

            } 

下面分享下预览效果：



demo下载：

瀑布流与无限滚动加载（已解决极客学院老师的bug）.zip

ec45ccbdc636499dbc9121f3790515c1.zip (3.36 MB)