1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <link rel="stylesheet" href="waterfall.css" type="text/css">
  7.     <script src="waterfall.js"></script>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding:0;
  12.         }
  13.         #content{
  14.             position: relative;
  15.             background-color: #006000;
  16.         }
  17.         .box{
  18.             padding: 5px;
  19.             float: left;
  20.         }
  21.         .box_img{
  22.             padding: 5px;
  23.             border: 1px solid #cccccc;
  24.             box-shadow: 0 0 5px #cccccc;
  25.             border-radius: 5px;
  26.         }
  27.         img{
  28.             width: 150px;
  29.             height: auto;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <div id="content">
  35.         <div class="box">
  36.             <div class="box_img">
  37.                 <img src="img/1.jpg">
  38.             </div>
  39.         </div>
  40.         <div class="box">
  41.             <div class="box_img">
  42.                 <img src="img/1.jpg">
  43.             </div>
  44.         </div>
  45.         <div class="box">
  46.             <div class="box_img">
  47.                 <img src="img/kitten-medium.png">
  48.             </div>
  49.         </div>
  50.         <div class="box">
  51.             <div class="box_img">
  52.                 <img src="img/1.jpg">
  53.             </div>
  54.         </div>
  55.         <div class="box">
  56.             <div class="box_img">
  57.                 <img src="img/1.jpg">
  58.             </div>
  59.         </div>
  60.         <div class="box">
  61.             <div class="box_img">
  62.                 <img src="img/kitten-medium.png">
  63.             </div>
  64.         </div>
  65.         <div class="box">
  66.             <div class="box_img">
  67.                 <img src="img/1.jpg">
  68.             </div>
  69.         </div>
  70.         <div class="box">
  71.             <div class="box_img">
  72.                 <img src="img/1.jpg">
  73.             </div>
  74.         </div>
  75.         <div class="box">
  76.             <div class="box_img">
  77.                 <img src="img/kitten-medium.png">
  78.             </div>
  79.         </div>
  80.         <div class="box">
  81.             <div class="box_img">
  82.                 <img src="img/1.jpg">
  83.             </div>
  84.         </div>
  85.         <div class="box">
  86.             <div class="box_img">
  87.                 <img src="img/1.jpg">
  88.             </div>
  89.         </div>
  90.         <div class="box">
  91.             <div class="box_img">
  92.                 <img src="img/kitten-medium.png">
  93.             </div>
  94.         </div>
  95.  
  96.     </div>
  97.     <script>
  98.         /**
  99.          * Created by asua on 2016/4/9.
  100.          */
  101.         window.onload=function(){
  102.             imgLocation("content","box");
  103.             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"},]}
  104.             window.onscroll=function(){
  105.                 if(checkFlag()){
  106.                     for(var i=0;i<lodeImage.Date.length;i++){
  107.                         var box=document.createElement("div");
  108.                         box.className="box";
  109.                         var cparent=document.getElementById("content");
  110.                         cparent.appendChild(box);
  111.                         var box_img=document.createElement("div");
  112.                         box_img.className="box_img";
  113.                         box.appendChild(box_img);
  114.                         var img=document.createElement("img");
  115.                         img.src="Img/"+lodeImage.Date[i].src;
  116.                         box_img.appendChild(img);
  117.                     }
  118.                     imgLocation("content","box");
  119.                 }
  120.             }
  121.         }
  122.         function checkFlag(){
  123.             var cparent=document.getElementById("content");
  124.             var ccontent=getChildElement(cparent,"box");
  125.             var lastContentHeight=ccontent[ccontent.length-1].offsetTop;
  126.             var scrollHeight=document.documentElement.scrollTop||document.body.scrollTop;
  127.             var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
  128.             console.log(lastContentHeight+":"+scrollHeight+":"+pageHeight);
  129.             if(lastContentHeight<scrollHeight+pageHeight){
  130.                 return true;
  131.             }
  132.         }
  133.         function imgLocation(parent,child){
  134.             var cparent=document.getElementById(parent);
  135.             var ccontent=getChildElement(cparent,child);
  136.             var imgwidth=ccontent[0].offsetWidth;
  137.             var cols=Math.floor(document.documentElement.clientWidth/imgwidth);
  138.             cparent.style.cssText="width:"+imgwidth*cols+"px;margin:30px auto";
  139.             var heightArr=[];
  140.             for(var i=0;i<ccontent.length;i++){
  141.                 if(i<cols){
  142.                     heightArr.push(ccontent[i].offsetHeight);
  143.                 }else{
  144.                     var minHeight=Math.min.apply(null,heightArr);
  145.                     var minIndex=getMinIndex(heightArr,minHeight);
  146.                     ccontent[i].style.position="absolute";
  147.                     ccontent[i].style.top=minHeight+"px";
  148.                     ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";
  149.                     heightArr[minIndex]+=ccontent[i].offsetHeight;
  150.                 }
  151.             }
  152.         }
  153.         function getMinIndex(heightArr,minHeight){
  154.             for(var i=0;i<heightArr.length;i++){
  155.                 if(heightArr[i]==minHeight){
  156.                     return i;
  157.                 }
  158.             }
  159.         }
  160.         function getChildElement(parent,content){
  161.             var contentArr=[];
  162.             var allcontent=parent.getElementsByTagName("*");
  163.             for(var i=0;i<allcontent.length;i++){
  164.                 if(allcontent[i].className==content){
  165.                     contentArr.push(allcontent[i]);
  166.                 }
  167.             }
  168.             return contentArr;
  169.         }
  170.     </script>
  171. </body>
  172. </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. [转]Android中Application类的用法

    原文链接:http://www.cnblogs.com/renqingping/archive/2012/10/24/Application.html Application类 Application ...

  2. codeforces 591A. Wizards' Duel 解题报告

    题目链接:http://codeforces.com/problemset/problem/591/A 题目意思:其实看下面这幅图就知道题意了,就是Harry 和 He-Who-Must-Not-Be ...

  3. BestCoder22 1003.NPY and shot 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5144 题目意思:有个人抛物体,已知抛的速度和高度,问可以抛到的最远距离是多少.即水平距离. 做的时候是 ...

  4. 【QT】C++ GUI Qt4 学习笔记4

    感觉这本书的顺序设计的太不合理了,出现的最多的一句话就是后面会讲.按照使用的顺序讲不行吗?搞得代码都运行不了. 我决定先直接跳到73页,子类化QTableWidgetItem这一节.因为前面功能的实现 ...

  5. Mysql之取消主从复制

    Mysql5.7 Mysql取消主从复制很简单.只需在其要终止同步的Server上[一般是Slave]执行下面语句即可: stop slave; reset slave; 如图: .

  6. Oracle dbms_lock.sleep()存储过程使用技巧-场景-分析-实例

    <Oracle dbms_lock.sleep()存储过程使用技巧>-场景-分析-实例 摘要:今天是2014年3月10日,北京,雾霾,下午组织相关部门开会.会议的结尾一名开发工程师找到了我 ...

  7. Mac 下 gradle 路径

    /Users/yourname/.gradle/wrapper/dists cmd:cd ~/.gradle/wrapper/dists/

  8. ［转］ C++的STL库，vector sort排序时间复杂度 及常见容器比较

    http://www.169it.com/article/3215620760.html http://www.cnblogs.com/sharpfeng/archive/2012/09/18/269 ...

  9. Linux安装xwindow图形界面

    在我们安装Linux系统时,刚开始的时候可能没有安装图形界面的需要,但在使用过程中却有可能产生这种需求.那么这种情况下,我们需不需要重新安装Linux系统来安装桌面呢?答案是不需要.下面我将交大家在已 ...

  10. 数据结构和算法 – 12.高级查找算法（下）

    哈希(散列)技术既是一种存储方法,也是一种查找方法.然而它与线性表.树.图等结构不同的是,前面几种结构,数据元素之间都存在某种逻辑关系,可以用连线图示表示出来,而哈希技术的记录之间不存在什么逻辑关系, ...