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

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. mysql int类型字段插入空字符串时自动转为0

    mysql int类型字段插入空字符串时自动转为0 如果不想转的话可以修改配置文件 修改 my.ini 文件. # Set the SQL mode to strictsql-mode=”STRICT ...

  2. Educational Codeforces Round 73

    唉,又是掉分的一场比赛... A. 2048 Game 题意:给出一个数组,问能不能通过一系列操作(将数组中的两个数相加变成另一个数),使得数组中包含2048,数组中的数全是2的指数,可以则输出YES ...

  3. Top 9 colleges in the world from 2010 to 2020, AI and interdisciplinary areas.

    http://csrankings.org/

  4. ASP.NET Core搭建多层网站架构【8.3-编写角色业务的增删改】

    2020/01/29, ASP.NET Core 3.1, VS2019 摘要:基于ASP.NET Core 3.1 WebApi搭建后端多层网站架构[8.3-编写角色业务的增删改] 编写最简单的增删 ...

  5. 简单的单元测试unittest实例

    unittest是Python中自带的一个单元测试模块,常常用它来做单元测试,它里面封装了用例的初始化操作和执行,以及返回结果的校验等操作. 在学习unittest框架之前需要先了解几个知识点: Te ...

  6. laravel 报错The Mix manifest does not exist.

    这是因为我们在 resources/views/layouts/app.blade.php 中使用 mix() 方法,而我们还未运行 Laravel Mix 进行编译,找不到 mix-manifest ...

  7. PHP弱类型（一）

    如图,id的值必须满足上述表达式,才能返回想要的值 与运算,只要出现false,整个表达式返回false 看见后面的==就想尝试一下弱类型绕过,参考资料:https://www.cnblogs.com ...

  8. git清除用户信息

    remote: Repository not found. fatal: repository 'https://github.com/chenbowen950908/zhongzanjiaoyu.g ...

  9. layer.open({}) 子页面传参并调用父页面的方法

    闲话少说先看效果!!! 说明适用场景:在a.jsp页面,点击查看一个文件,layer.open弹出b.jsp页面,在b.jsp页面可以修改文件的名称(其实是去改了数据库),但是关闭弹窗的后,要求不刷新 ...

  10. 吴裕雄--天生自然Numpy库学习笔记：NumPy Ndarray 对象

    NumPy 最重要的一个特点是其 N 维数组对象 ndarray,它是一系列同类型数据的集合,以 0 下标为开始进行集合中元素的索引. ndarray 对象是用于存放同类型元素的多维数组. ndarr ...