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

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. linux系统用户锁定与解锁

    1.使用passwd命令锁定与解锁账号 [root@rhel7 ~]# passwd -l lxj --- -l 锁定 Locking password for user lxj. passwd: S ...

  2. HDU -2546饭卡(01背包+贪心)

    这道题有个小小的坎,就是低于5块不能选,大于5块,可以任意选,所以就在初始条件判断一下剩余钱数,然后如果大于5的话,这时候就要用到贪心的思想,只要大于等于5,先找最大的那个,然后剩下的再去用背包去选择 ...

  3. js 获取元素在页面上的偏移量的最佳方式

    使用js制作效果时,我们常常要获取某个元素在页面上的偏移量(例如tip提示框功能).而获取偏移量可以直接获取相对于document的偏移量,也可以获取相对与视口的偏移量(viewpoint)加上页面滚 ...

  4. spring aop例子

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAATcAAAFWCAIAAACD6E2aAAAgAElEQVR4nO2df1gTV77/55/93z/2ee

  5. MySQL查看数据库大小、表大小和最后修改时间

    查看数据库表基本信息. select * from information_schema.TABLES where information_schema.TABLES.TABLE_SCHEMA = ' ...

  6. 通过安全策略限制局域网部分IP访问我的电脑

    一旦电脑连上局域网,那么别人就容易进入自己的电脑,造成隐私被泄漏,这是我们最不愿发生的情况.因此,如果你的电脑并不需要向局域网其他用户共享资料,那么就建议采用策略,禁止局域网电脑访问自己的电脑,以保证 ...

  7. MySQL 行子查询

    MySQL 行子查询 行子查询是指子查询返回的结果集是一行 N 列,该子查询的结果通常是对表的某行数据进行查询而返回的结果集. 一个行子查询的例子如下: SELECT * FROM table1 WH ...

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

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

  9. jq 事件冒泡总结

    什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个 ...

  10. Ubuntu 12.04更换显示器后显示“显示不支援”，只能进恢复模式工作

    以前用的一台14寸液晶,换成17寸后,进入系统显示器上“显示不支援”  .仔细观查,电脑硬盘自检能显示后,后面都是黑屏. 解决过程. 因为grub 启动菜单不能显示.盲按方向键,发现菜单里的其它项目可 ...