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. xib下这种方式创建cell

      这种方法在iOS5.0之前是不能够创建成功的.   MEConvertListTableViewCell *cell = [tableView dequeueReusableCellWithIde ...

  2. HTTP请求头和响应头总结

    1)请求(客户端->服务端[request])     GET(请求的方式) /books/java.html(请求的目标资源) HTTP/1.1(请求采用的协议和版本号)     Accept ...

  3. loadrunner - Run time Settings 的详细说明

    本文主要讲解一下run-time settings(如图1所示)里各设置项的具体含义(注:标红色的选项卡是比较值得关注的,可重点看一下): 图1 1.General / Run Logic 选项卡   ...

  4. java写入换行符

    写入一个文件,生成文本文档,里面写入1000行字符,但是写出来的没有换行.所以纠结,百度了下,一行完事. String crlf=System.getProperty("line.separ ...

  5. PipelineDB On Kafka

    PipelineDB 安装yum install https://s3-us-west-2.amazonaws.com/download.pipelinedb.com/pipelinedb-0.9.8 ...

  6. C#获取枚举的描述

    public enum StatusEnum { /// <summary> /// 运行中 /// </summary> [Description("运行中&quo ...

  7. css+html+JQuery 万能弹出层，居中显示

    function ShowMsg(str) {//要提示的文字 $(".payment_time_mask").remove(); $("body").appe ...

  8. UWP开发入门（八）——聊天窗口和ItemTemplateSelector

    我们平常用的最多的APP可能就是企鹅和微信了.有没有想过聊天窗口如何实现的?本篇我们将简单模拟一个聊天窗口. 聊天窗口大致上就是消息的一个集合列表.集合列表最常见的展现形式无非就是ListView.可 ...

  9. 30个你 “ 不可能全部会做 ” 的javascript题目-答案解释

    题目链接:http://www.cnblogs.com/0603ljx/p/4458127.html 1,D map对数组的每个元素调用定义的回调函数并返回包含结果的数组.["1" ...

  10. 【题解】 AGC029-A Irreversible operation

    传送门 定位:思维好题. 考虑无论如何每一个W都会和前面的B在一起交换一次,所以直接求和就好了. 注意long long的使用. #include<stdio.h> #include< ...