用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()每次刷新页面后滚动的值有时候会不 ...

随机推荐

Bitmap vs 2Bitmap的实现
[本文链接] http://www.cnblogs.com/hellogiser/p/bitmap-vs-2bitmap.html [题目] 在2.5亿个整数找出不重复的整数,内存不足以容纳着2.5亿 ...
echo 单引号和双引号
echo输出 $key=value echo "$key" echo 后面带双引号的话,双引号里面的内容会翻译,输出value echo '$key' echo后面带单引号的话,双 ...
日历插件My97DatePicker的使用
在开发过程中,我们会经常遇到让用户输入日期的表单,这类表单处理起来也不是太繁琐,就是简单的字符串和日期之间的转换.但是,如果用户不按照已设定的日期格式进行输入,必定会造成不必要的麻烦.为了更好的处理这 ...
Django环境搭建
1.安装好Python 2.7.10 2.下载解压Django Django-1.9.2.tar.gz cmd cd到解压缩目录(***) python setup.py install 3.检测是否 ...
【OpenCV】直方图
今天写直方图,学了几个相关函数 1. mixChannels void mixChannels(const Mat* src, int nsrc, Mat* dst, int ndst, const ...
(2016弱校联盟十一专场10.2) E.Coins
题目链接很久之前写的了,好像是对拍打表过的,推一下就行了. #include <bits/stdc++.h> using namespace std; typedef long long ...
Oracle BFILE备忘
创建目录 create or replace directory exp_dir as '/tmp'; 赋权 grant read, write on directory exp_dir to PUB ...
修改searchbar 取消字体颜色
UIButton *cancelButton; UIView *topView = self.searchDisplayController.searchBar.subviews[]; for (UI ...
iOS 语录
1. 输入法切换: cmd + space 2. xcode 退出全屏control + cmd + f 3. xcode 代码格式化插件Uncrustify,XAlign, CLangFormat ...
局域网聊天Chat(马士兵视频改进版)
Github地址: https://github.com/BenDanChen/Chat Chat 小小的聊天系统,主要是跟着网上的马士兵老师的公开视频然后再自己反思有什么地方需要改进的地方,然后大体 ...

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

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

随机推荐

热门专题