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. C++智能指针shared_ptr

    shared_ptr 这里有一个你在标准库中找不到的—引用数智能指针.大部分人都应当有过使用智能指针的经历,并且已经有很多关于引用数的文章.最重要的一个细节是引用数是如何被执行的—插入,意思是说你将引 ...

  2. [Erlang18]教练！又发现Erlang Shell里面的神奇函数一只

      人嘛,总是想提高效率,创造更多的价值,同时也得到更多的选择空间.可一个人的精力,时间终归是有限的,减少自身重复或无意义工作就显得格外重要! 要么懂得授权,要么把重复的工作交给机器来做: 现实: 美 ...

  3. ASP.NET基于Aspose.Words插入Word水印以及多个水印

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Da ...

  4. MVC页面移除HTTP Header中服务器信息

    默认情况下,每一个MVC请求的HTTP Header中都会包含着当前服务器的一些信息,出于安全还是性能还是处女座的强迫症等等,都想把这些信息移除掉,增加一些应用程序的神秘感,如下,默认情况下Chrom ...

  5. C# PowerPoint操作的基本用法。

    代码using System;using System.Collections.Generic;using System.Linq;using System.Text;using OFFICECORE ...

  6. asp.net mvc全局异常捕获

    通过重写OnException方法形式实现. 1.自定义异常记录类并继承HandleErrorAttribute类. public class HandlerErrorAttribute : Hand ...

  7. Android学习之Adapter(数据适配器)

    1.定义     数据适配器是AdapterView视图(如ListView - 列表视图控件.Gallery - 缩略图浏览器控件.GridView - 网格控件.Spinner - 下拉列表控件. ...

  8. GO学习笔记 - 函数名前面是否有输入参数肯定是不一样的！！

    在刚接触GO语言时候,我相信你也会有这种困惑,为什么有的函数名前面有输入参数,而一些却没有,它们是否有差别?确实有差别,没有输入参数,是一般的函数:有输入参数,是结构的方法,输入参数叫做“方法接收者” ...

  9. java学习笔记—HttpServletResponse（21）

    public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, ...

  10. acedSSSetFirst选择集夹点亮显实例

    ads_name ss; //执行预选 好像可以无视PICKSTYLE变量 if (RTNORM != acedSSGet(_T("I"),NULL,NULL,NULL,ss)) ...