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

随机推荐

【转】关于Class.getResource和ClassLoader.getResource的路径问题
Java中取资源时,经常用到Class.getResource和ClassLoader.getResource,这里来看看他们在取资源文件时候的路径问题. Class.getResource(Stri ...
解读Unity中的CG编写Shader系列一
转自http://www.itnose.net/detail/6095323.html 前提知识点: 1.CG代码必须用 CGPROGRAM ... ENDCG括起来 2.顶点着色器与片段着色器的主函 ...
pt-query-digest使用介绍【转】
本文来自:http://isadba.com/?p=651 一.pt-query-digest参数介绍. pt-query-digest --user=anemometer --password=an ...
nyoj_299_Matrix Power Series_矩阵快速幂
Matrix Power Series 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 Given a n × n matrix A and a positive i ...
Greedy:Graveyard Design(POJ 2100)
墓地题目大意,给定一个整数,要你找出他的平方和组合太简单了....不过一开始我储存平方和想降低时间,后来发现会超内存,直接用时间换空间了,游标卡尺法 #include <iostream&g ...
pom.xml中引入局域网仓库
<repositories> <repository> <id>nexus</id> <name>my-nexus-repository&l ...
simple demo how to get the list of online users
using System;using System.Collections;using System.Configuration;using System.Data;using System.Linq ...
【leetcode】Distinct Subsequences(hard)
Given a string S and a string T, count the number of distinct subsequences of T in S. A subsequence ...
【leetcode】Minimum Size Subarray Sum（middle）
Given an array of n positive integers and a positive integer s, find the minimal length of a subarra ...
在Win7下使用sphinx-build建立开源软件文档
最近想看看odoo的使用文档,在线看不方便,而且还没有提供离线文档下载,由于是开源项目,此项目托管在Github上,于是就有了想通过Github把文档git下来,可是git下来的文档是.rst文件,无 ...

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

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

随机推荐

热门专题