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

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. PAT 1015 Reversible Primes (判断素数)

    A reversible prime in any number system is a prime whose "reverse" in that number system i ...

  2. [C/C++] _tprintf() 输出不了汉字

    在前面加一个 setlocale(LC_ALL, ""); //必须得有这行 否则不能输出中文 注意得加locale头文件 #include<stdio.h> #inc ...

  3. 在tomcat上部署项目

    1.部署项目的第一种方法(项目直接放入 webapps 目录中) 2.部署项目的第二种方法(修改 conf/server.xml 文件 ) 3.部署项目的第三种方法(apache-tomcat-7.0 ...

  4. Smart License

    思科启动了通过构建思科智能软件管理器门户来简化客户许可管理的计划. 它可以帮助客户了解他们购买的许可证以及他们使用的许可证. 其他各种思科产品已经启用Smart Enabled,随着此版本(我这里学习 ...

  5. 【MySQL】数据类型之字符相关

    " 目录 字符类型 char类型 varchar类型 实测 总结 枚举类型与集合类型 字符类型 官网:https://dev.mysql.com/doc/refman/5.7/en/char ...

  6. mac机器smb映射

    1  finder中打开前往 2  输入:smb://10.216.90.*  链接 3  输入 账户和密码(名称和密码是你机器的smb密码:比如123***)

  7. SpringCloud全家桶学习之消息总线---SpringCloud Bus

    一.概述 ConfigClient(微服务)从ConfigServer端获取自己对应的配置文件,但是目前的问题是:当远程git仓库配置文件发生改变时,每次都是需要重启ConfigCient(微服务), ...

  8. pycharm如何关闭虚拟环境（即取消venv命令行）

    venv命令行 是虚拟环境特有, 为什么要使用虚拟环境: 在实际项目开发中,我们通常会根据自己的需求去下载各种相应的框架库,如Scrapy.Beautiful Soup等,但是可能每个项目使用的框架库 ...

  9. 页面弹窗toast和加载loading

    create-at 2019-04-04 都采用单例模式,原生js实现 兼容老版本浏览器内核,请将用es6语法的地方作修改 loading 加载 代码: 样式全部通过js创建style标签注入head ...

  10. docker部署-windows环境

    docker部署-windows环境 1.      docker windows 1.1.    安装 win7或者win8需要利用docker toolbox来安装,其是一个docker工具集,w ...