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

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. IdentityHashCodeTest

    Java学习:identityHashCode和hashCode方法, System类提供了一个identityHashCode(Object x)方法,这个方法返回的是指定对象的精确hashCode ...

  2. 如何让后加载的元素被一开始就有的css样式渲染成功（强制提升css优先级）

    今天在做搜索框中的提示语下拉的时候,提示框把搜索框的底部的border遮住,导致看起来不是很美观: 因为下方的提示框是用js后加载的它的样式也是随着js一起加载的,而这个js和它的css我们是不能改动 ...

  3. nginx介绍以及nginx的反向代理

    什么是nginx? Nginx 是一个高性能的轻量级的HTTP和反向代理服务器,也是一个邮件服务器. 下载地址 本人使用的是Tengine,它是由淘宝网发起的Web服务器项目.它在Nginx的基础上, ...

  4. python中，字符串前的u，b，r字符的含义

    1.字符串前加 u 例:u"我是含有中文字符组成的字符串." 作用: 后面字符串以 Unicode 格式 进行编码,一般用在中文字符串前面,防止因为源码储存格式问题,导致再次使用时 ...

  5. MySQL8.0.11安装后，使用CMD无法启动mysql服务

    首先,先把mysql的bin路径添加到系统环境变量 这样做可以,直接进入CMD后执行mysql服务,不需要进入mysql的bin文件路径去执行. 第一步:在MySQL的安装文件的bin目录(例如:C: ...

  6. Centos610安装MVN

    1.下载mav安装 下载免安装版上传linux cd /opt/maven mkdir repository cd apche-maven-3.3.9/conf vi settings.xml  设置 ...

  7. ANSYS布尔运算APDL

    目录 1.交运算 2.加运算 3.减运算 4.分割 5. 搭接 6. 互分 6.粘结 1.交运算 交运算的结果是由每个初始图元的共同部分,形成一个新的图元. 命令 功能 备注 LINL 线与线的交 A ...

  8. C++ STL之集合set的使⽤

    写在最前面,本文摘录于柳生笔记: set是集合,一个set里面个元素各不相同的,而且set会按照元素从小到大的进行排序,一下是set的常用方法:

  9. Kafka 消息的消费原理

    https://www.cnblogs.com/huxi2b/p/6061110.html 1.老版本的kafka的offset是维护在zk上的,新版本的kafka把consumer的offset维护 ...

  10. Pipenv & 虚拟环境

    本教程将引导您完成安装和使用 Python 包. 它将向您展示如何安装和使用必要的工具,并就最佳做法做出强烈推荐.请记住, Python 用于许多不同的目的.准确地说,您希望如何管理依赖项可能会根据 ...