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. linux每天一小步---cat命令详解

    1 命令功能 cat命令是linux系统下的一个文本输出命令,通常用于查看文件的内容. 2 命令语法 cat  [选项参数]  文件名 3 命令参数 -n  由1开始对所有输出的内容行数编号 -b   ...

  2. Shell编程-03-Shell中的特殊变量和扩展变量

    目录 特殊变量 变量扩展 特殊变量     在Shell中的特殊变量主要分别两种位置参数变量.状态变量两种. 位置参数变量     Shell中的位置参数变量主要是指$0.$1.$#等,主要用于从命令 ...

  3. Oracle EBS Add Responsibility to User by the Responsibility reference of Other User.

    Oracle EBS 11i Add Responsibility to User by the Responsibility reference of Other User. Warning: R1 ...

  4. lambda distinct

    public ActionResult Index() { IList<RegisterModel> regList = new List<RegisterModel>() { ...

  5. 在 Docker 中部署 ASP.NET CORE 应用

    有了 Docker 之后, 部署起来却这间非常方便,环境不用搭了, 直接创建一个 microsoft/aspnetcore 的容器, 在本地开发好后, 把内容直接部署到容器中. 下面的命令是把本地发布 ...

  6. ASP.NET2.0 Newtonsoft.Json 操作类分享

    JSON 是现在比较流行的数据交互格式,NET3.0+有自带类处理JSON,2.0的话需要借助Newtonsoft.Json来完成,不然自己写的话,很麻烦. 网上搜索下载 Newtonsoft.Jso ...

  7. Asp.NetCore取配置信息

    本文简单介绍Asp.NetCore取自定义配置信息的方法,要取配置信息首先得有配置文件. 1, 本例新建了一个TimeOut.json配置文件,和其对应的一个TimeOut类 2, 首先在Startu ...

  8. autofac JSON文件配置

    autofac是比较简单易用的IOC容器.下面我们展示如何通过json配置文件,来进行控制反转. 需要用到以下程序集.可以通过nugget分别安装 Microsoft.Extensions.Confi ...

  9. C/C++,python,java,C#月经贴问题

    在刚开始的时候,一直纠结于语言之争,什么什么有前途,什么什么没前途.对于什么的支持不好啦,个人信仰问题啦.什么都有. 首先最主要的一个个人观点:“语言不是老婆,不是一夫一妻制”.你可以同时拥有许多的女 ...

  10. S2-052复现过程（附POC利用）

    漏洞编号:CVE-2017-9805(S2-052) 影响版本:Struts 2.5 - Struts 2.5.12 漏洞概述:问题出现在struts2-rest-plugin插件XStreamHan ...