记录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. 在C++中使用C#编写的类2

    在那篇<在C#中使用C++编写的类>中我介绍了如何在C#中使用C++编写的类.可是由于C#在用户界面设计.数据库存储和XML文件读取等方面的优势,有时候也会出现要在C++中使用C#编写的类 ...

  2. 64位CentOS6.2安装erlang及rabbitmqServer

    CentOS 6.2 64bit 安装erlang及RabbitMQ Server 1.操作系统环境(CentOS 6.2 64bit) [root@HAproxy ~]# cat /etc/issu ...

  3. 我的Python成长之路---第二天---Python基础（7）---2016年1月9日（晴）

    再说字符串 一.字符串的编码 字符串的编码是个很令人头疼的问题,由于计算机是美国人发明的,他们很理所当然的认为计算机只要能处理127个字母和一些符号就够用了,所以规定了一个字符占用8个比特(bit)也 ...

  4. java--进步学习IO

    import java.io.*; public class Demo1 { public static void main(String []args) throws Exception{ File ...

  5. iOS开发之iOS7设置状态栏字体颜色

    应用中登陆界面颜色较浅,状态栏字体颜色为黑色,跳转到主界面之后,界面颜色较深,状态栏颜色随之变成白色.但是再重新返回登陆界面后,状态栏字体颜色并没有改成黑色,特别别扭. plist文件里将View c ...

  6. 02-IOSCore - NSFileHandle、合并文件、文件指针、文件查看器

    [day0201_NSFileHandle]:文件句柄 1 NSFileHandle 文件对接器.文件句柄 常用API: - (NSData *)readDataToEndOfFile;读取数据到最后 ...

  7. 《音乐商店》第4集：自动生成StoreManager控制器

    一.自动生成StoreManager控制器 二.查看 StoreManager 控制器的代码 现在,Store Manager 控制器中已经包含了一定数量的代码,我们从头到尾重新过一下. 1.访问数据 ...

  8. svn回滚版本2

    svn 版本回滚 取消对代码的修改分为两种情况:   第一种情况:改动没有被提交(commit). 这种情况下,使用svn revert就能取消之前的修改. svn revert用法如下: # svn ...

  9. POJ 1287：Networking（最小生成树Kruskal）

    id=1287">Networking Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 5976   Acce ...

  10. cloudflare的新waf，用Lua实现的

    我们使用nginx贯穿了我们的网络,做前线web服务,代理,流量过滤.在某些情况下,我们已经扩充了nginx上我们自己的模块的核心C代码,但近期我们做了一个重大举措,与nginx结合使用lua 差点儿 ...