本篇内容实现类似百度图片的呈现功能，瀑布流+自动加载

index13.html

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>uvi</title>

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

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

 </head>

 <body>

    <div id="container">

       <div class="box">

          <div class="box_img">

             <img src="img.jpg">

          </div>

       </div>

       <div class="box">

          <div class="box_img">

             <img src="img2.jpg">

          </div>

       </div>

       <div class="box">

          <div class="box_img">

             <img src="img3.jpg">

          </div>

       </div>

       <div class="box">

          <div class="box_img">

             <img src="img4.jpg">

          </div>

       </div>

       <div class="box">

          <div class="box_img">

             <img src="img5.jpg">

          </div>

       </div>

       <div class="box">

          <div class="box_img">

             <img src="img6.jpg">

          </div>

       </div>

       <div class="box">

          <div class="box_img">

             <img src="img7.jpg">

          </div>

        </div>

        <div class="box">

          <div class="box_img">

             <img src="img8.jpg">

          </div>

        </div>

        <div class="box">

          <div class="box_img">

             <img src="img9.jpg">

          </div>

        </div>

        <div class="box">

          <div class="box_img">

             <img src="img3.jpg">

          </div>

       </div>

       <div class="box">

          <div class="box_img">

             <img src="img4.jpg">

          </div>

       </div>

       <div class="box">

          <div class="box_img">

             <img src="img5.jpg">

          </div>

       </div>

       <div class="box">

          <div class="box_img">

             <img src="img6.jpg">

          </div>

       </div>

       <div class="box">

          <div class="box_img">

             <img src="img7.jpg">

          </div>

        </div>

        <div class="box">

          <div class="box_img">

             <img src="img8.jpg">

          </div>

        </div>

        <div class="box">

          <div class="box_img">

             <img src="img9.jpg">

          </div>

        </div>

        <div class="box">

          <div class="box_img">

             <img src="img3.jpg">

          </div>

       </div>

       <div class="box">

          <div class="box_img">

             <img src="img4.jpg">

          </div>

       </div>

       <div class="box">

          <div class="box_img">

             <img src="img5.jpg">

          </div>

       </div>

       <div class="box">

          <div class="box_img">

             <img src="img6.jpg">

          </div>

       </div>

       <div class="box">

          <div class="box_img">

             <img src="img7.jpg">

          </div>

        </div>

        <div class="box">

          <div class="box_img">

             <img src="img8.jpg">

          </div>

        </div>

        <div class="box">

          <div class="box_img">

             <img src="img9.jpg">

          </div>

        </div>

       </div>

    </div>

 </body>

 </html>

css代码:

 *{

     margin:0px;

     padding:0px;

 }

 #container{

     position:relative;

 }

 .box{

     padding: 5px;

     float: left;

 }

 .box_img{

     padding:5px;

     border:1px solid #cccccc;

     box-shadow:  5px #cccccc;

     border-radius:5px;

 }

 .box_img img{

     width:1000px;

     height:auto;

 }

js代码

 window.onload = function(){

     imgLocation("container","box");

     var imgData={"data":[{"src":"img.jpg"},{"src":"img2.jpg"},{"src":"img3.jpg"}]};

     window.onscroll = function(){//监听滚动条

         if(checkFlag()){

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

             for(var i=;i<imgData.data.length;i++){

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

                 ccontent.className = "box";

                 cparent.appendChild(ccontent);

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

                 boximg.className = "box_img";

                 ccontent.appendChild(boximg);

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

                 img.src = imgData.data[i].src;

                 boximg.appendChild(img);

             }

             imgLocation("container","box");

         }

     }

 }

 function checkFlag(){

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

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

     var lastContentHeight = ccontent[ccontent.length-].offsetTop;//获取最后一张照片距离顶部的高度

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

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

     if(lastContentHeight<scrollTop+pageHeight){

         return true;

     }

 }

 function imgLocation(parent,content){

     //将parent下的所有content全部取出

     var cparent = document.getElementById(parent);

     var ccontent = getChildElement(cparent,content);

     var imgWidth = ccontent[].offsetWidth;

     var num =Math.floor(document.documentElement.clientWidth/imgWidth);

     cparent.style.cssText = "width:"+imgWidth*num+"px;margin:0px auto";

     var BoxHeightArr = [];

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

         if(i<num){

             BoxHeightArr[i] = ccontent[i].offsetHeight;

         }else{

             var minHeight = Math.min.apply(null,BoxHeightArr);//获得最小高度

             var minIndex = getminheightLocation(BoxHeightArr,minHeight);

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

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

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

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

         }

     }

 }

 function getminheightLocation(BoxHeightArr,minHeight){

     for(var i in BoxHeightArr){

         if(BoxHeightArr[i]==minHeight){

             return i;

         }

     }

 }

 function getChildElement(parent,content){

     var contentArr = [];

     var allcontent = parent.getElementsByTagName("*");

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

         if(allcontent[i].className==content){

             contentArr.push(allcontent[i]);

         }

     }

     return contentArr;

 }

JS瀑布流效果的更多相关文章

  1. JS 瀑布流效果

    JS瀑布流效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  2. 面向对象js瀑布流效果

    index.html <!doctype html><html lang="en"> <head>  <!--网站编码格式,UTF-8 国 ...

  3. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

  4. 利用JS实现简单的瀑布流效果

    哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...

  5. js图片瀑布流效果

    要实现图片瀑布流效果,首先得准备几张图片. html的部分比较简单就是将图片加载到浏览器就可以了 代码如下(注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果): <!DOCTYPE ...

  6. js 实现图片瀑布流效果，可更改配置参数 带完整版解析代码[waterFall.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...

  7. 使用JS实现图片展示瀑布流效果

    不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度 ...

  8. WPF下制作的简单瀑布流效果

    最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面 我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单. 1.最重要的 ...

  9. 用jQuery实现瀑布流效果学习笔记

    jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...

随机推荐

  1. C# 面向对象 ， 类与对象

    一,类的字段 类的字段, 就是类里面的 数据. 二,类的方法 1 , 函数的重载 , 如何判断:  是由两个或多个同名函数组成的,但是函数要有不同的参数.或个数.(参数  是函数的输入的东西) shu ...

  2. ZOJ1524

    题意:给定需要购买物品的顺序以及总物品对应的价格,求解按顺序购买物品时最小花费. 输入: m,n(m代表需要购买物品的清单,n代表总的物品数) Xi...(代表对应物品的序号以及价格) 输出: cos ...

  3. 让页脚footer永远固定在页面的底部，而不是永远固定在显示器屏幕的底部的方法

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

  4. Visual Studio2015 Community一些必备插件

    Visual Studio2015 Community一些必备插件 是不是感觉虽然VS2015的代码编辑能力已经很强大了,但是总感觉差了那么一些呢?不用担心,它有很多非常强大的插件,能够让你打代码事半 ...

  5. LayoutInflater.inflate() 参数研究

    参考连接:http://blog.csdn.net/lovexieyuan520/article/details/9036673 http://www.2cto.com/kf/201407/31305 ...

  6. Linux下批量替换文件内容方法

    1:查找find . -type f -name "*.html"|xargs grep ‘yourstring’ 2:查找并替换find -name '要查找的文件名' | xa ...

  7. Objective－C 笔记 字符串操作

    这次总结下OC里一些对字符串的一些操作. 创建字符串对象时,会创建一个内容不可更改的对象,称为不可变对象.可以使用NSString类处理不可变字符串.你经常需要处理字符串并更改字符串中的字符.例如,可 ...

  8. union关键字 与大小端模式

    union 关键字(主要用来压缩空间,如果一些数据不可能同一时间同时用到,可是考虑使用union) union关键字声明的变量称之为联合体变量: (1)联合体变量只配置一个足够大的空间来容纳最大长度的 ...

  9. LR：Code - 60990，Code - 10343 问题解决

    Code - 60990 Error: Two Way Communication Error: Function two_way_comm_post_message /two_way_comm_po ...

  10. part3

    我就不刁旭概念什么的问题了哈~直接进入工作中所通用的一些有关object的方法和属性 1).for/in 属性的遍历~他遍历的对象没有特定的顺序,而且只能枚举出所有用户自定义的属性,不能枚举出某些预定 ...