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

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

    Java 8:新的时间和日期API 在Java 8之前,所有关于时间和日期的API都存在各种使用方面的缺陷,因此建议使用新的时间和日期API,分别从旧的时间和日期的API的缺点以及解决方法.Java ...

  2. 《实战Java高并发程序设计》读书笔记一

    第一章 走入并行世界 1.基本概念 同步:同步方法一旦开始,调用者必须等到方法调用返回后,才能继续后续操作 异步:一旦开始,方法调用就会立即返回,调用就可以继续后续操作 并发:表示两个或者多个任务一起 ...

  3. 获取自增长的id值

    单个: <insert id="create" parameterType="com.dto.Cou" useGeneratedKeys="tr ...

  4. vb.net从数据库中取数据

    1.设置从Model中的Sub Main 启动 2.程序结构 3.Model1 Imports System.Windows.Forms.Application Module Module1 Sub ...

  5. spark实验(二)--scala实验(3)

    实验1,计算级数: 首先打开安装完scala ide的eclipse,在eclipse 中新建一个scala project. 然后新建一个scala的object对象 导入scala.io.StdI ...

  6. 【代码审计】VAuditDemo 前台搜索功能反射型XSS

    在 search.php中 $_GET['search']未经过任何过滤就被输出 可能存在反射型XSS

  7. 在Linux系统中使用ntfs、fat32格式的存储设备

    在Linux系统中使用ntfs.fat32格式的存储设备   我们通常使用的移动硬盘或U盘一般都是ntfs或fat32的文件系统,作为一名运维工程师,经常会遇到把移动硬盘或者U盘上的内容拷贝的Linu ...

  8. SAM（后缀自动机）总结

    “写sam是肯定会去写的,这样才学的了字符串,后缀数组又不会用 >ω<, sam套上数据结构的感觉就像回家一样! 里面又能剖分又能线段树合并,调试又好调,我爱死这种写法了 !qwq” SA ...

  9. 一份非常值得一看的Java面试题

    包含的模块 本文分为十九个模块,分别是: Java 基础.容器.多线程.反射.对象拷贝.Java Web .异常.网络.设计模式.Spring/Spring MVC.Spring Boot/Sprin ...

  10. 关于调用接口 Connection reset 问题（使用代理调接口）

    之前调用过别的公司的接口上传数据,但是遇到个问题就是Connection reset,查阅了网上的各种资料,说什么的都有,主要意思就是说发布接口和调用接口的某些配置不一样,但是这个怎么说呢,单方面没办 ...