要实现图片瀑布流效果，首先得准备几张图片。

html的部分比较简单就是将图片加载到浏览器就可以了

代码如下（注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果）：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>pool</title>

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

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

</head>

<body>

    <div id="container">

        <div class="box">

            <div class="box_img">

                <img src="1.jpeg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="8.jpg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="3.jpg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="4.jpg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="5.jpg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="6.jpg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="7.jpg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="2.jpeg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="9.jpg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="10.jpg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="10.jpg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="9.jpg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="10.jpg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="1.jpeg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="2.jpeg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="4.jpg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="6.jpg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="3.jpg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="9.jpg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="2.jpeg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="6.jpg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="3.jpg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="9.jpg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="2.jpeg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="6.jpg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="3.jpg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="9.jpg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="2.jpeg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="6.jpg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="3.jpg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="9.jpg">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="2.jpeg">

            </div>

        </div>

    </div>

</body>

</html>

style2.css代码如下：

*{

margin: 0px;/*外边距*/

padding: 0px; /*内边距   */

}

#container{

    position: relative;/*相对布局*/

}

.box{

    padding: 5px;

    float: left;/*向左浮动*/

}

.box_img{

    padding: 5px;

    border: 1px solid #cccccc;/*边框*/

    box-shadow: 0 0 5px #cccccc;

    border-radius: 5px;

}

.box_img img{

    width: 150px;

    height: auto;

}

app.js代码如下（灵魂）：

window.onload = function (){

imgLocation("container","box");

    //准备的照片

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

    window.onscroll=function(){

        //鼠标滑轮一滑就加载图片实际上就是将图片添加到html中

        //就是添加下面东西到html中，src变化

        /*<div class="box">

            <div class="box_img">

            <img src="8.jpg">

            </div>

            </div>

          */

        if(checkOut()){

            //因为html是树结构的

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

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

                //分别创建2个div和一个img

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

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

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

                //给创建的节点添加与之前再html直接写出的图片区域一样的属性

                boxDiv.className = "box";

                boxImgDiv.className = "box_img";

                Img.src = imgData.data[i].src;

                //确定添加节点的位置（你创建的节点的父母是谁）

                cparent.appendChild(boxDiv);

                boxDiv.appendChild(boxImgDiv);

                boxImgDiv.appendChild(Img);

            }

            //按照之前的照片排列规则

            imgLocation("container","box");

        }

    }

}

function checkOut() {

    var ccontent=[];

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

    ccontent=getChildElement(cparent,"box");

    var lastTopheight= ccontent[ccontent.length-1].offsetTop;//最后一张照片距离最上面的高度（大于液面高度）

    var scrollTop = document.documentElement.scrollTop;//滚轮滑动的长度

    var pageHeight = document.documentElement.clientHeight||document.body.clientHeight;//页面高度

    //console.log(lastTopheight+":"+scrollTop+":"+pageHeight);

    //当滑到最后一张图片准备开始加载准备的图片

    //判定条件就是页面高度加上鼠标滑轮滑动大于最后一张图片距离最上面的高度（等于就是刚准备刷到最后一张照片）

    if(pageHeight+scrollTop>lastTopheight){

        return true;

    }

}

function imgLocation(parent,content){

    var cparent=document.getElementById(parent);//先获得的container节点

    var ccontent=getChildElement(cparent,content);

    //console.log(ccontent);

    var imgWidth=ccontent[0].offsetWidth;

    var WindowWidth=document.documentElement.clientWidth;

    var num=Math.floor(WindowWidth/imgWidth);//浏览器一横行所放图片的数量

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

    // console.log(num);

    // console.log(ccontent.length);

    var boxHeightArr=[];

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

        if(i<num){

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

        //console.log(boxHeightArr[i]);

        }else{

            var minHeight= Math.min.apply(null,boxHeightArr);//找到数组最小的高度

            // console.log(minHeight);

            var minindex=getminHeightLocation(boxHeightArr,minHeight);//获得最小高度图片的下标

            //设置布局是绝对的

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

            //将下一行的照片放在最小的下方因为长度相同

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

            ccontent[i].style.left=ccontent[minindex].offsetLeft+"px";

            //将最小的值变为最小的加上它下面的高度（目的：这样下个最小就是第二小）

            boxHeightArr[minindex]=boxHeightArr[minindex]+ccontent[i].offsetHeight;

        }

    }

}

function getChildElement(parent,content) {

    var allContent=[];

    allContent=parent.childNodes;//parent.getElementsByTagName("*");(注释掉的是视频中讲的)

    var contentArr = new Array();

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

        if(allContent[i].className==content){

            contentArr.push(allContent[i]);

        }

    }

    return contentArr;

}

function getminHeightLocation(boxHeightArr,minHeight){

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

        if(boxHeightArr[i]==minHeight){

            return i;

        }

    }

}

效果展示（滑轮向下滑永远滑不到尽头）：

js图片瀑布流效果的更多相关文章

  1. js 图片瀑布流效果实现

    /** * Created by wwtliu on 14/9/5. */$(document).ready(function(){ $(window).on("load",fun ...

  2. js 实现图片瀑布流效果，可更改配置参数 带完整版解析代码[waterFall.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...

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

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

  4. 利用LruCache载入网络图片实现图片瀑布流效果(改进版)

    PS: 2015年1月20日21:37:27 关于LoadImageAsyncTask和checkAllImageViewVisibility可能有点小bug 改动后的代码请參见升级版本号的代码 ht ...

  5. JS+PHP瀑布流效果（二）

    <!-- 加载商品 --><script>    //用户拖动滚动条,达到底部时ajax加载一次数据    var loading = $("#loading&quo ...

  6. JS+PHP瀑布流效果

    miai.php,代码如下: $link = mysql_connect("localhost","root",""); //连接数据库 $ ...

  7. 原生js实现瀑布流效果

    参考此篇:https://segmentfault.com/a/1190000012621936 以下为个人测试中: css: .masonry{ width:100%; } .item{ posit ...

  8. 使用JS实现图片展示瀑布流效果

    不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度 ...

  9. js实现瀑布流加载图片效果

    今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1. ...

随机推荐

  1. ubuntu 安装 gd

    最近装一套系统,提示没开启GD, 1.首先检查一下,是否安装 新建一个文件 <?php phpinfo(); ?> 如果安装了,会在页面显示 2.没安装当然没有了 这个安装也是根据php版 ...

  2. 高次arccos积分

    \[\Large\displaystyle \int_0^{1} \frac{\arccos^4 \left(x^2\right)}{\sqrt{1-x^2}}\,\mathrm{d}x\] \(\L ...

  3. Linux编程日常错误

    编译的时候出现如下错误提示: undefined reference to `sem_init'undefined reference to `sem_post'undefined reference ...

  4. 【C语言】判断某一正整数是否为完数

    什么是完数? 如果一个数等于它的因子之和,则称该数为“完数”(或“完全数”). 例如,6的因子为1.2.3,而 6=1+2+3,因此6是“完数”. 程序框图:m  问题分析 根据完数的定义,解决本题的 ...

  5. Cocos2dLua3.17.2集成FairyGUI之 lua绑定 (二)

    上一章中将fairyGUI集成到C++工程,由于本人使用的是cocoslua,还需要将C++的绑定到lua中使用,本章记录一下过程,由于是过了一段时间,有些步骤忘记了,大概记录一下,诸位大大做个临时参 ...

  6. python中的分号（“；”）

    在C.Java等语言的语法中规定,必须以分号作为语句结束的标识.Python也支持分号,同样用于一条语句的结束标识.但在Python中分号的作用已经不像C.Java中那么重要了,Python中的分号可 ...

  7. docker基础知识之挂载本地目录

    docker可以支持把一个宿主机上的目录挂载到镜像里. docker run -it -v /home/dock/Downloads:/usr/Downloads ubuntu64 /bin/bash ...

  8. cmd创建用户开启3389命令

    1.创建用户chen Net user chen 1234566 /add 2.将用户chen添加到管理员组 net localgroup Administrators chen /add 3.开启3 ...

  9. 手把手教你使用Hexo+GitHub搭建自己的个人博客网站

    安装nodejs环境 这个直接搜索安装即可,安装完成之后,通过如下命令检测环境变量是否安装成功: λ node -v # 输出版本号 v12.13.1 正确输入版本号即可. 安装cnpm cnpm是淘 ...

  10. Java学习资源 - J2EE

    java Web开发基础(一)工程项目文档结构 ========rmi=========== Java RMI 框架(远程方法调用) java RMI原理详解 深究Java中的RMI底层原理 ==== ...