用js实现图片自动加载的瀑布流效果

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" href="waterfall.css" type="text/css">

    <script src="waterfall.js"></script>

    <style>

        *{

            margin: 0;

            padding:0;

        }

        #content{

            position: relative;

            background-color: #006000;

        }

        .box{

            padding: 5px;

            float: left;

        }

        .box_img{

            padding: 5px;

            border: 1px solid #cccccc;

            box-shadow: 0 0 5px #cccccc;

            border-radius: 5px;

        }

        img{

            width: 150px;

            height: auto;

        }

    </style>

</head>

<body>

    <div id="content">

        <div class="box">

            <div class="box_img">

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

            </div>

        </div>

        <div class="box">

            <div class="box_img">

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

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="img/kitten-medium.png">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

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

            </div>

        </div>

        <div class="box">

            <div class="box_img">

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

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="img/kitten-medium.png">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

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

            </div>

        </div>

        <div class="box">

            <div class="box_img">

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

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="img/kitten-medium.png">

            </div>

        </div>

        <div class="box">

            <div class="box_img">

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

            </div>

        </div>

        <div class="box">

            <div class="box_img">

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

            </div>

        </div>

        <div class="box">

            <div class="box_img">

                <img src="img/kitten-medium.png">

            </div>

        </div>

    </div>

    <script>

        /**

         * Created by asua on 2016/4/9.

         */

        window.onload=function(){

            imgLocation("content","box");

            var lodeImage={"Date":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"10.jpg"},]}

            window.onscroll=function(){

                if(checkFlag()){

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

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

                        box.className="box";

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

                        cparent.appendChild(box);

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

                        box_img.className="box_img";

                        box.appendChild(box_img);

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

                        img.src="Img/"+lodeImage.Date[i].src;

                        box_img.appendChild(img);

                    }

                    imgLocation("content","box");

                }

            }

        }

        function checkFlag(){

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

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

            var lastContentHeight=ccontent[ccontent.length-1].offsetTop;

            var scrollHeight=document.documentElement.scrollTop||document.body.scrollTop;

            var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;

            console.log(lastContentHeight+":"+scrollHeight+":"+pageHeight);

            if(lastContentHeight<scrollHeight+pageHeight){

                return true;

            }

        }

        function imgLocation(parent,child){

            var cparent=document.getElementById(parent);

            var ccontent=getChildElement(cparent,child);

            var imgwidth=ccontent[0].offsetWidth;

            var cols=Math.floor(document.documentElement.clientWidth/imgwidth);

            cparent.style.cssText="width:"+imgwidth*cols+"px;margin:30px auto";

            var heightArr=[];

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

                if(i<cols){

                    heightArr.push(ccontent[i].offsetHeight);

                }else{

                    var minHeight=Math.min.apply(null,heightArr);

                    var minIndex=getMinIndex(heightArr,minHeight);

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

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

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

                    heightArr[minIndex]+=ccontent[i].offsetHeight;

                }

            }

        }

        function getMinIndex(heightArr,minHeight){

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

                if(heightArr[i]==minHeight){

                    return i;

                }

            }

        }

        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;

        }

    </script>

</body>

</html>

用js实现图片自动加载的瀑布流效果的更多相关文章

js原生图片懒加载或 js原生图片预加载，html标签自定义属性
使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载当访问一个页面的时候,先把img元素或是其他元素的 ...
JS实现图片预加载无需等待
网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...
js图片未加载完显示loading效果
<html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...
页面性能优化-原生JS实现图片懒加载
在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...
js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用
js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用一.总结一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...
js插件---图片懒加载lazyload
js插件---图片懒加载lazyload 一.总结一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...
JS实现图片懒加载插件
一.前言我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...
js, javascript 图片懒加载实例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
js判断图片是否加载完毕
附件: https://www.jb51.net/article/102385.htm 问题: .offset().top和$(window).scrollTop()每次刷新页面后滚动的值有时候会不 ...

随机推荐

HDU 3111 Sudoku（精确覆盖）
数独问题,输入谜题,输出解既然都把重复覆盖的给写成模板了,就顺便把精确覆盖的模板也写好看点吧...赤裸裸的精确覆盖啊~~~水一水~~~然后继续去搞有点难度的题了... #include <cs ...
mysql时间字符串按年/月/天/时分组查询
SELECT DATE_FORMAT( deteline, "%Y-%m-%d %H" ) , COUNT( * ) FROM test GROUP BY DATE_FORMAT( ...
Parallels Destop软件配置
Parallels Destop个人感觉最好用的mac虚拟win软件 http://pan.baidu.com/s/1jHFwIGm 密码:ab21百度云下载(或者下载自己百度云的) 安装方法: 1. ...
20145213《Java程序设计》实验报告一：Java开发环境的熟悉（Windows+IDEA）
20145213<Java程序设计>实验报告一:Java开发环境的熟悉(Windows+IDEA) 实验要求使用JDK编译.运行简单的Java程序. 使用IDEA编辑.编译.运行.调试J ...
function与感叹号
原文链接:https://swordair.com/function-and-exclamation-mark/ 最近有空可以让我静下心来看看各种代码,function与感叹号的频繁出现,让我回想起2 ...
Google earth
装了Google earth之后,需要联网,才能放缩看不同精细程度的场景,除非你之前看过,在你自己的缓存中有存储. Google earth有自己的server,我们交互化的时候,server传数据给 ...
windows端口备忘
FTP 端口号21 SSH 端口号22 Telnet 端口号23
忘记Mysql登录密码
1,使用安全模式跳过验证: 如果 Mysql在运行,Kill掉. 如果mysqld_safe无法启动,可用管理员权限sudo . 2,本地登录: 启动Mysql 3,修改密码: 5.7之后, 更改密码 ...
Android Service 与 Thread 的区别
Ref:http://blog.csdn.net/jiangwei0910410003/article/details/17008687 1). Thread:Thread 是程序执行的最小单元,它是 ...
TCP/IP五层模型
(2)TCP/IP五层模型的协议应用层传输层网络层数据链路层物理层物理层:中继器.集线器.还有我们通常说的双绞线也工作在物理层数据链路层:网桥(现已很少使用).以太网交换机(二层 ...

用js实现图片自动加载的瀑布流效果

用js实现图片自动加载的瀑布流效果的更多相关文章

随机推荐

热门专题