记录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. 解决win7 中source insight没有courier new字节的问题

    解决win7 中source insight没有courier new字节的问题  http://blog.csdn.net/season_hangzhou/article/details/18665 ...

  2. 用css实现列表菜单的效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Linux -FHS 标准

    FHS (Filesystem Hierarchy Standard),其目的是让用户可以了解以安装软件通常放在那个文件下面. /bin 放置的是单用户维护模式下,能够被调用的命令.主要有cat,ch ...

  4. 11-UIKit（Storyboard、View的基本概念、绘制图形、UIBezierPath）

    目录: 1. Storyboard 2. Views 3. View的基本概念介绍 4. 绘制图形 5. UIBezierPath 回到顶部 1. Storyboard 1.1 静态表视图 1)Sec ...

  5. USACO 2005 January Gold The Wedding Juicer

    题目 题目链接,我只在poj上找到了题目,usaco居然上不去. 大意就是说有一些\(1\times 1\times 1\)的小方块堆在一起,问最多能装多少水. 我们在一次测试中出了这题,由于我写水题 ...

  6. jquery validate 插件使用小结

    项目中整合了jquery validate插件,仿照别人的使用写了我的表单验证,结果不起作用.然后就各种找原因. 在网上下了jquery validate插件的完整包,看了看里边的例子,跟我的使用貌似 ...

  7. Linux系统中如何添加自己的库文件路径

    库文件在连接(静态库和共享库)和运行(仅限于使用共享库的程序)时被使用,其搜索路径是在系统中进行设置的.一般 Linux 系统把 /lib 和 /usr/lib 两个目录作为默认的库搜索路径,所以使用 ...

  8. C++多继承的好处是增加了弹性和灵活性，Delphi类强迫单继承TObject是为了提供许多强大功能

    要说灵活性,是C++更强.我自己开发已经好几次碰到需要多继承的情况了. 但是Delphi强迫继承TObject,虽然是单继承,但是提供了相当多的强力功能.要说强大,那还是Delphi当仁不让. 摘自& ...

  9. 使用 jackson序列格式化日期

    [1]自定义时间,序列化类 [java] view plaincopy package com.fsti.bm.utils; import java.io.IOException; import ja ...

  10. Java--Eclipse关联Java源码

    打开Eclipse,Window->Preferences->Java 点Edit按钮后弹出: 点Source Attachment后弹出: 选择Java安装路径下的src.zip文件即可 ...