记录JS实现瀑布流照片墙效果

首先是前端页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>瀑布流</title>

    <link rel="stylesheet" type="text/css" href="js瀑布流.css">

    <script type="text/javascript" src="js瀑布流.js"></script>

</head>

<body>

<div id="container">

    <div class="box">

        <div class="box_img">

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

        </div>

    </div>

<div class="box">

        <div class="box_img">

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

        </div>

    </div>

    <div class="box">

        <div class="box_img">

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

        </div>

    </div>

    <div class="box">

        <div class="box_img">

            <img src="img/4.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/6.jpg"/>

        </div>

    </div>

    <div class="box">

        <div class="box_img">

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

        </div>

    </div>

    <div class="box">

        <div class="box_img">

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

        </div>

    </div>

    <div class="box">

        <div class="box_img">

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

        </div>

    </div>

    <div class="box">

        <div class="box_img">

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

        </div>

    </div>

    <div class="box">

        <div class="box_img">

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

        </div>

    </div>

</div>

</body>

</html>

接下来是样式

*{

    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;

}

最后是最主要的JS代码

加载图片

function imgLocation(parent,content){

    var cparent=document.getElementById(parent);

    var cconten=getChildElement(cparent,content);//得到所有子节点

    var imgWidth=cconten[0].offsetWidth// 得到宽度，每张图片的宽度都是固定的，所以这里可以随便取一张

    var cols=Math.floor(document.documentElement.clientWidth/imgWidth)//频幕的宽度除以图片的宽度，就是这一排能放图片的个数

    cparent.style.cssText="width:"+imgWidth*cols+"px; margin:0 auto"; //设置主容器的样式

    var boxHeightArr=[];//第一排图片的高度

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

        if (i<cols) { //如果是第一排 ,cols为一排能放图片的个数

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

        }

        else{ //找到第一排最小图片的高度

        var minHeight=Math.min.apply(null,boxHeightArr)//最小图片的高度

        var minIndex= getminHeightLocation(boxHeightArr,minHeight);

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

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

         cconten[i].style.left=cconten[minIndex].offsetLeft+"px";

         boxHeightArr[minIndex]=boxHeightArr[minIndex]+cconten[i].offsetHeight;//把当前最小的高度加上当前追加图片的高度

        }

    }

}

获得子节点

function getChildElement(parent,content){

    var contentArr=[];

    var allContent=parent.getElementsByTagName("*");

    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 in boxHeightArr){

        if(boxHeightArr[i]==minHeight){

            return i;

        }

    }

}

判断是否需要加载

function checkFlag(){

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

    var cconten=getChildElement(cparent,"box");

    var lastContentHeight=cconten[cconten.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;

    }

}

页面加载完触发

window.onload=function(){

    imgLocation("container","box")

    var imgData={'data':[{'src':'92.jpg'},{'src':'16.jpg'},{'src':'17.jpg'},{'src':'18.jpg'}]};

    //鼠标滚动事件

    window.onscroll=function(){

        if(checkFlag()){ //是否需要加载图片

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

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

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

                cconten.className="box";

                cparent.appendChild(cconten);

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

                boximg.className="box_img";

                cconten.appendChild(boximg);

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

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

                boximg.appendChild(img);

            }

            imgLocation("container","box")

        }

    }

}

[JS练习] 瀑布流照片墙的更多相关文章

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

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

  2. Android瀑布流照片墙实现，体验不规则排列的美感

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/10470797 传统界面的布局方式总是行列分明.坐落有序的,这种布局已是司空见惯,在 ...

  3. 原生JS实现瀑布流

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

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

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

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

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

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

随机推荐

  1. ACM 做题过程中的一些小技巧。

    ACM做题过程中的一些小技巧. 1.一般用C语言节约空间,要用C++库函数或STL时才用C++; cout.cin和printf.scanf最好不要混用. 2.有时候int型不够用,可以用long l ...

  2. BZOJ 2318: Spoj4060 game with probability Problem( 概率dp )

    概率dp... http://blog.csdn.net/Vmurder/article/details/46467899 ( from : [辗转山河弋流歌 by 空灰冰魂] ) 这个讲得很好 , ...

  3. 前端开发工具（安装及常用技巧）——sublime text 3

    安装 官方下载地址:http://www.sublimetext.com Sublime Text 3 一大优势就是跨平台(Windows.Linux.OS X 都有):portable versio ...

  4. ubuntu下配置qt+opengl+opencv

    原地址:http://www.cnblogs.com/aleny-liu/archive/2011/12/16/aleny-Qtnote1.html http://blog.csdn.net/jdh9 ...

  5. perl oracle utf-8 结果匹配中文字符

    [oracle@oadb sbin]$ cat s1.pl #!/usr/bin/perl use DBI; use Encode; use HTTP::Date qw(time2iso str2ti ...

  6. 基于visual Studio2013解决C语言竞赛题之0808打印链表

     题目

  7. Ubuntu一些配置和技巧

    安装google-chrome wget https://dl.google.com/linux/direct/google-chrome-stable_current_i386.deb sudo d ...

  8. SQL 多个表之间联合查询

    非常少用join,这次学学,并备忘两篇文章! 转自:http://hcx-2008.javaeye.com/blog/285661 连接查询 通过连接运算符能够实现多个表查询.连接是关系数据库模型的主 ...

  9. PB数据管道

    数据管道提供了一种不同数据库之间传递数据和(或)表结构的方法. 数据管道对象 要完毕数据管道的功能须要提供例如以下内容: 须要数据源和目标数据库,并可以和这两个数据库正常联接 须要源数据库中的哪些表: ...

  10. Flexigrid折行显示问题

    上会写的Flexigrid折行显示时,获取值有问题,报错. getRows: function(){ //add by jej var rtnList = new Array(); var objRo ...