<!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实现图片自动加载的瀑布流效果的更多相关文章

  1. js原生图片懒加载 或 js原生图片预加载，html标签自定义属性

    使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...

  2. JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...

  3. js图片未加载完显示loading效果

    <html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...

  4. 页面性能优化-原生JS实现图片懒加载

    在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...

  5. js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用

    js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...

  6. js插件---图片懒加载lazyload

    js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...

  7. JS实现图片懒加载插件

    一.前言 我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...

  8. js, javascript 图片懒加载 实例代码

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

  9. js判断图片是否加载完毕

    附件: https://www.jb51.net/article/102385.htm 问题:  .offset().top和$(window).scrollTop()每次刷新页面后滚动的值有时候会不 ...

随机推荐

  1. 终端ssh登录mac用shell打包ipa报错：replacing existing signature

    终端ssh登录mac用shell打包ipa报错:replacing existing signature 报错原因:login.keychain被锁定,ssh登录的没有访问权限 解决方法:终端敲入 s ...

  2. 日历插件My97DatePicker的使用

    在开发过程中,我们会经常遇到让用户输入日期的表单,这类表单处理起来也不是太繁琐,就是简单的字符串和日期之间的转换.但是,如果用户不按照已设定的日期格式进行输入,必定会造成不必要的麻烦.为了更好的处理这 ...

  3. web.config中配置页面出错后跳转指定错误页面

    每当用户访问错误页面时,会出现不友好的404错误,所以为了防止这种不友好,我们在web.config中的<system.web>节点下配置 <customErrors>,在出现 ...

  4. git remote 相关用法

    为了便于管理,Git要求每个远程主机都必须指定一个主机名.git remote  命令就用于管理主机名. 不带选项的时候,git remote命令列出所有远程主机. $ git remote orig ...

  5. asp.net mvc 部分视图加载区别

    ASP.NET MVC 部分视图   ASP.NET(11)  版权声明:本文为博主原创文章,未经博主允许不得转载. [部分视图] ASP.NET MVC 里的部分视图,相当于 Web Form 里的 ...

  6. Hyper snap

    图像->分辨率,设置成300dpi,一般论文的分辨率要求.

  7. Innodb之拷贝InnoDB表从一服务器到另一台服务器2

    本章节阐述将表移动到不同server上的技术.如可以将整个Mysql 实例转移到更大.更快的Server上:也可以拷贝整个实例到Slave上:也可以拷贝单个表或某些表到其他Server上(数据仓库). ...

  8. No space left on device 解决Linux系统磁盘空间满的办法

    最近Linux电脑在执行mvn时候总是报错: No space left on device   原因是磁盘空间满了,我马上加了20G的硬盘容量,但是还是报错,上网查了一下,发现了解决方法,我用了其中 ...

  9. Swift - 推送之本地推送(UILocalNotification)添加Button的点击事件

    上一篇讲到的本地推送是普通的消息推送,本篇要讲一下带按钮动作的推送消息 import UIKit @UIApplicationMain class AppDelegate: UIResponder, ...

  10. MyEclipse生成WAR包并在Tomcat下部署发布(转发)

    从来没有想过web项目还能打包的,但是有要求,就不得不去实现,在网上找了一下,发现挺简单的. 首先是使用MyEclipse将web项目打包,如下图所示. 右键选中项目,选择export. 然后选择J2 ...