记录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. BZOJ 3196: Tyvj 1730 二逼平衡树( 树套树 )

    这道题做法应该很多吧.... 我用了线段树套treap.... -------------------------------------------------------------------- ...

  2. [转]tripwire-文件指纹

    原文链接:http://www.ipython.me/centos/tripwire-file-md5.html Tripwire是目前最为著名的unix下文件系统完整性检查的软件工具,这一软件采用的 ...

  3. WCF技术剖析之二十二: 深入剖析WCF底层异常处理框架实现原理[中篇]

    原文:WCF技术剖析之二十二: 深入剖析WCF底层异常处理框架实现原理[中篇] 在[上篇]中,我们分别站在消息交换和编程的角度介绍了SOAP Fault和FaultException异常.在服务执行过 ...

  4. Genymotion 插件在 Eclipse 和 Android Studio 中点击后无法初始化 Initialize Engine: failed 解决方法

    Genymotion 插件已更新至 1.0.6,目前无法初始化的问题已经解决. ------------------------------------------------------------ ...

  5. 操作引入xml文件的书包（定位到指定节点）

    定位到指定节点:e0.1 <chtml><we>@{_samples/test.xml:HtokID=e0.1}</we></chtml> 上述表达式表 ...

  6. hdoj 1286 找新朋友 【数论之欧拉函数】

    找新朋友 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  7. ASP.NET、WinForm、C# - 配置文件信息读取 [ Web.config || Appconfig ]

    <configuration> <appSettings> <add key="name" value="HF_Ultrastrong&qu ...

  8. 【Tips】Endnote导入IEEE Xplore文献方法《转载》

    1. 在IEEE XPlore中点击“Download Citation”: 2. 选中“Citation & Abstract”和“EndNote,Procite,RefMan”两个选项: ...

  9. php 实时汇率接口

    ​function getExchangeRate($from_Currency,$to_Currency) { $amount = urlencode($amount); $from_Currenc ...

  10. 人人网javascript面试题

    JavaScript面试题要求:以下题目必须从一至四题中,选出三道题,使用原生代码实现,不可使用任何框架,第五题为选作题. 一.  在页面的固定区域内实现图片的展示       <ignore_ ...