记录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. 关于Dropdownlist使用的心得体会

    2013-07-23关于Dropdownlist使用的心得体会: Dropdownlist使用最多的几个属性: 一.Dropdownlist.Items,负责包含所有选项的容器 DropDownLis ...

  2. BZOJ 3685: 普通van Emde Boas树( 线段树 )

    建颗权值线段树就行了...连离散化都不用... 没加读入优化就TLE, 加了就A掉了...而且还快了接近1/4.... ---------------------------------------- ...

  3. 【转载】CentOS日志系统组成详解

    日志系统有三部分组成:一.使用什么工具记录系统产生的日志信息?      syslog服务脚本管理的两个进程: syslogd.klogd 来记录系统产生的日志信息:      klogd     进 ...

  4. 高级UIKit-04(NSUserDefaults、NSKeyedArchiver、对象归档方法)

    [day05_1_UserDefault]:判断应用程序是否是第一次运行 NSUserDefaults:用来保存应用程序的配置信息如:程序运行次数,用户登陆信息等. // 使用系统提供的NSUserD ...

  5. C++静态库中使用_declspec(dllexport) 不能导出函数的问题

    在某项目中,有一些静态库,这些静态库中有类型命名的函数GET_XXX.在一次项目结构调整的时候,我想将调用这静态库的代码编译成DLL,并且将这些Get函数导出,我就直接就这些函数前面添加了_decls ...

  6. 新鲜出炉的Using Qt 3D to visualize music

    http://blog.qt.io/blog/2016/01/27/using-qt-3d-visualize-music/

  7. Fix Windows 7 Msvcp71.dll And Msvcr71.dll Missing Error

    Fix Windows 7 Msvcp71.dll And Msvcr71.dll Missing Error Fix Msvcp71.dll And Msvcr71.dll Missing Erro ...

  8. 有关oppo蝴蝶解锁的三Ｄ技术

    oppo手机的界面设计也是很漂亮的.在很多界面中使用了3D技术塑造出了大量华丽的效果.在蝴蝶解锁中使用了两个对称的三D变幻,宛如蝴蝶翅膀上美丽的花纹.在受到用户点击后,随风缓慢上下扇动,充满浪漫的动感 ...

  9. ListView 使用方法（Asp.Net）

    您将须要用到的独有数据绑定控件. Fritz Onion 代码下载位置: ExtremeASPNET2008_03.exe (192 KB) Browse the Code Online  文件夹 L ...

  10. android Context的理解

    很多初入Android开发的网友向我们问到Context有什么作用,很多地方都用到它,这里Android123给这些新入门的网友做个简单的解释:  Context字面意思上下文,位于framework ...