HTML:先让图片充满一页

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>瀑布流</title>

    <link rel="stylesheet" href="css/style.css" type="text/css">

    <script src="js/app.js"></script>

</head>

<body>

    <div id="container"><div class="box">

          <<div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div></div></div>

</body>

</html>

app.js:

window.onload=function() {

    imgLocation("container");

    var imgData={"data":[{"src":"2.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"}]};

    window.onscroll =function(){

        if(checkFlag()){

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

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

                var cnode=document.createElement("div");

                cnode.className="box";

                cparent.appendChild(cnode);

                var boxImg=document.createElement("div");

                boxImg.className="box_img";

                cnode.appendChild(boxImg);

                var img=document.createElement("img");

                img.src="img/"+imgData.data[i].src;

                boxImg.appendChild(img);

            }

            imgLocation("container");

        }

    }

}

function checkFlag(){

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

    var arr=cparent.childNodes;

    var lastContentHeight=arr[arr.length-1].offsetTop;

    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

    var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;

    if(lastContentHeight<scrollTop+pageHeight){

        return true;

    }

}

function imgLocation(parent){

    var cparent = document.getElementById(parent);

    var arr=Array.prototype.slice.call(cparent.childNodes,0);

    var imgWidth=arr[0].offsetWidth;

    var num=parseInt(document.documentElement.clientWidth/imgWidth);

    cparent.style.cssText="width:"+imgWidth*num+"px;"+"margin:0px auto";

    var boxHeightArr=[];

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

        if(i<num){

            boxHeightArr[i]=arr[i].offsetHeight;

        }else{

            var minHeight=Math.min.apply(null,boxHeightArr);

            var index=getMinHeightindex(boxHeightArr,minHeight);

            arr[i].style.position = "absolute";

            arr[i].style.top = minHeight+"px";

            arr[i].style.left = arr[index].offsetLeft+"px";

            boxHeightArr[index] = boxHeightArr[index]+arr[i].offsetHeight;

        }

    }

}

function getMinHeightindex(boxHeightArr,minHeight){

    for(var i in boxHeightArr){

        if(boxHeightArr[i]==minHeight){

            return i;

        }

    }

}

css:

*{

    padding:0px;

    margin:0px;

}

#container{

    position:relative;

}

.box{

    padding:5px;

    float:left;

}

.box_img{

    padding:5px;

    border:1px solid #cccccc;

    border-radius: 5px;

    box-shadow: 0 0 5px #cccccc;

}

.box_img img{

    width:150px;

    height: auto;

}
 

JS实现瀑布流的更多相关文章

  1. 用js实现瀑布流的一种简单方法

    现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...

  2. 原生JS实现瀑布流

    浏览网页的时候经常会遇到瀑布流布局的网站.也许有些读者不了解瀑布流.瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数 ...

  3. js实现瀑布流的一种简单方法实例分享

    现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...

  4. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

  5. [JS练习] 瀑布流照片墙

    记录JS实现瀑布流照片墙效果 首先是前端页面 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. bootstrap+masonry.js写瀑布流

    最近在用bootstrap写一个网站,其中有个图文展示的页面要用到瀑布流的效果.因为项目要求,项目要以bootstrap为基准,不准私自添加内联样式.内部样式,所以,自己写瀑布流就不行了,所以,根据要 ...

  7. 多栏布局与JS实现瀑布流

    css3属性之多栏布局与JS实现瀑布流 背景:之前打算自己总结一下flex布局的知识点,发现自己无从下手,原因在何处:我反思了一下,其实原因很简单,使用的次数少,更多的时间使用了百分比,浮动和定位解决 ...

  8. js插件---瀑布流Masonry

    js插件---瀑布流Masonry 一.总结 一句话总结:还是要去看官网,比amazeui上面介绍的详细很多 1.瀑布流的原理是什么? 给外层套好相对定位,里面的每一个弄好绝对定位,然后计算出每一个的 ...

  9. js原生瀑布流

    背景: 1.在移动端开发,jq文件是显得非常庞大的,所以所有效果尽量用HTML5和原生js实现. 2.本次瀑布流是固定列数,采用非浮动的另外一种瀑布流思想实现的. 3.本次数据来源是json接口 4. ...

  10. vue.js实现瀑布流之vue-waterfall-easy

    想必大家应该很多都已经习惯了jquery的DOM操作,jquery的瀑布流实现起来也很容易. 但是,随着时代的发展,随着时代的进步..... 算了算了,扯远了,既然能找到这儿来,肯定是在vue.js上 ...

随机推荐

  1. alertView 上添加textField

    - (void)showTextFieldUIAlertView {     UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@ ...

  2. Linux 基础教程 32-解压缩命令

        将文件压缩后对提升数据传输效率,降低传输带宽,管理备份数据都有非常重要的功能,因此文件压缩解压技能就成为必备技能.相对于Windows中的文件解压缩工具百花争艳,在Linux中的解压缩工具则要 ...

  3. 对ConditionQueue和锁的理解

    1. 什么时候使用conditionQueue 使用conditionQueue的一个最基本的条件是,操作和状态相关,而且是多线程同时访问的状态. 也就是说在使用conditionQueue的时候, ...

  4. Unity3d之Coroutine

    在Unity3d中使用C#时,Coroutine是一个大有用处的好东西,至于怎么用网上多的是讲,我仅在此记录最近一次使用中的小发现. 因为某种需求,要在一个Coroutine实现中使用while循环, ...

  5. Django博客项目思路整理

    首先明确一点,我目前学习Django是为了做一个博客,那么以博客为目标进行实践的话,按照Django的MTV模型的顺序来思考的话,要考虑如下几个事情: (Models) 1.在博客里的各种数据模型: ...

  6. Kafka与.net core（三）kafka操作

    1.Kafka相关知识 Broker:即Kafka的服务器,用户存储消息,Kafa集群中的一台或多台服务器统称为broker. Message消息:是通信的基本单位,每个 producer 可以向一个 ...

  7. WPF Path 画箭头

    代码: <Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.c ...

  8. SpringBoot ：docker

    Docker 是一个开源的应用容器引擎 docker官方网站:https://hub.docker.com/ $部署docker到Linux系统 1.准备一个Linux系统的虚拟机或者物理机 本例所使 ...

  9. Luogu1438 无聊的数列（单点查询）&&加强版（区间查询）

    题目链接:戳我 线段树中差分和前缀和的应用 其实对于加上等差数列的操作我们可以分成这样三步-- update(1,1,n,l,l,k); if(r>l) update(1,1,n,l+1,r,d ...

  10. collections模块—— Counter

    ounter目的是用来跟踪值出现的次数.它是一个无序的容器类型,以字典的键值对形式存储,其中元素作为key,其计数作为value.计数值可以是任意的Interger(包括0和负数).Counter类和 ...