HTML:先让图片充满一页

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>瀑布流</title>

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

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

</head>

<body>

    <div id="container"><div class="box">

          <<div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div>

    </div><div class="box">

        <div class="box_img">

            <img src="img/5.jpg">

        </div></div></div>

</body>

</html>

app.js:

window.onload=function() {

    imgLocation("container");

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

    window.onscroll =function(){

        if(checkFlag()){

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

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

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

                cnode.className="box";

                cparent.appendChild(cnode);

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

                boxImg.className="box_img";

                cnode.appendChild(boxImg);

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

                img.src="img/"+imgData.data[i].src;

                boxImg.appendChild(img);

            }

            imgLocation("container");

        }

    }

}

function checkFlag(){

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

    var arr=cparent.childNodes;

    var lastContentHeight=arr[arr.length-1].offsetTop;

    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

    var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;

    if(lastContentHeight<scrollTop+pageHeight){

        return true;

    }

}

function imgLocation(parent){

    var cparent = document.getElementById(parent);

    var arr=Array.prototype.slice.call(cparent.childNodes,0);

    var imgWidth=arr[0].offsetWidth;

    var num=parseInt(document.documentElement.clientWidth/imgWidth);

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

    var boxHeightArr=[];

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

        if(i<num){

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

        }else{

            var minHeight=Math.min.apply(null,boxHeightArr);

            var index=getMinHeightindex(boxHeightArr,minHeight);

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

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

            arr[i].style.left = arr[index].offsetLeft+"px";

            boxHeightArr[index] = boxHeightArr[index]+arr[i].offsetHeight;

        }

    }

}

function getMinHeightindex(boxHeightArr,minHeight){

    for(var i in boxHeightArr){

        if(boxHeightArr[i]==minHeight){

            return i;

        }

    }

}

css:

*{

    padding:0px;

    margin:0px;

}

#container{

    position:relative;

}

.box{

    padding:5px;

    float:left;

}

.box_img{

    padding:5px;

    border:1px solid #cccccc;

    border-radius: 5px;

    box-shadow: 0 0 5px #cccccc;

}

.box_img img{

    width:150px;

    height: auto;

}
 

JS实现瀑布流的更多相关文章

  1. 用js实现瀑布流的一种简单方法

    现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...

  2. 原生JS实现瀑布流

    浏览网页的时候经常会遇到瀑布流布局的网站.也许有些读者不了解瀑布流.瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数 ...

  3. js实现瀑布流的一种简单方法实例分享

    现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...

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

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

  5. [JS练习] 瀑布流照片墙

    记录JS实现瀑布流照片墙效果 首先是前端页面 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. bootstrap+masonry.js写瀑布流

    最近在用bootstrap写一个网站,其中有个图文展示的页面要用到瀑布流的效果.因为项目要求,项目要以bootstrap为基准,不准私自添加内联样式.内部样式,所以,自己写瀑布流就不行了,所以,根据要 ...

  7. 多栏布局与JS实现瀑布流

    css3属性之多栏布局与JS实现瀑布流 背景:之前打算自己总结一下flex布局的知识点,发现自己无从下手,原因在何处:我反思了一下,其实原因很简单,使用的次数少,更多的时间使用了百分比,浮动和定位解决 ...

  8. js插件---瀑布流Masonry

    js插件---瀑布流Masonry 一.总结 一句话总结:还是要去看官网,比amazeui上面介绍的详细很多 1.瀑布流的原理是什么? 给外层套好相对定位,里面的每一个弄好绝对定位,然后计算出每一个的 ...

  9. js原生瀑布流

    背景: 1.在移动端开发,jq文件是显得非常庞大的,所以所有效果尽量用HTML5和原生js实现. 2.本次瀑布流是固定列数,采用非浮动的另外一种瀑布流思想实现的. 3.本次数据来源是json接口 4. ...

  10. vue.js实现瀑布流之vue-waterfall-easy

    想必大家应该很多都已经习惯了jquery的DOM操作,jquery的瀑布流实现起来也很容易. 但是,随着时代的发展,随着时代的进步..... 算了算了,扯远了,既然能找到这儿来,肯定是在vue.js上 ...

随机推荐

  1. Hdu4280 Island Transport 2017-02-15 17:10 44人阅读 评论(0) 收藏

    Island Transport Problem Description In the vast waters far far away, there are many islands. People ...

  2. 深入jetty的使用详解

    简介: Jetty 是一个用 Java 实现.开源.基于标准的,并且具有丰富功能的 Http 服务器和 Web 容器,可以免费的用于商业行为.Jetty 这个项目成立于 1995 年,现在已经有非常多 ...

  3. [label][OS] 制作 U 盘安装 Windows 7

    U盘安装完美的WIN7操作系统教程 [编辑] 请使用正版系统   http://item.jd.com/965031.html   以保证您的电脑信息安全 此教程适用与 win7及win8 准备工作 ...

  4. CAS实战のclient自定义过滤器

    我们在配置cas client肯定写过如下代码: <filter> <filter-name>CASFilter</filter-name> <filter- ...

  5. [51单片机] nRF24L01 无线模块 串口法命令 通过无线控制另一个的灯

    >_<!概述: 这是在上一个的基础上通过按键发送4种不同命令来控制接收端的LED灯亮的改进版(上一个:http://www.cnblogs.com/zjutlitao/p/3840013. ...

  6. ASP.NET RouteModule相关的一些东西

    Asp.NET中的路由配置,首先要提到的几个相关类型,Route ,RouteBase,RouteData,RouteTable,RouteCollection 这几个.下面我一次回忆一下,有需要的朋 ...

  7. 限制html文本框input只能输入数字和小数点

    代码: <input type="text" class="txt" name="qty" value="" on ...

  8. Delphi XE7的安卓程序如何调用JAVA的JAR，使用JAVA的类？

    本文使用工具和全部源码下载: http://download.csdn.net/detail/sunylat/8190765 为什么我们要在Delphi XE7的安卓程序调用JAVA的JAR,使用JA ...

  9. HTML防止input回车提交表单

    原链接:https://blog.csdn.net/ligang2585116/article/details/44699567 自动提交情况说明: 1.默认情况下,单个输入框,无论按钮的type=& ...

  10. “全栈2019”Java异常第十章：throw与throws区别详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...