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

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. NS2仿真：公交车移动周期模型及性能分析

    NS2仿真实验报告3 实验名称:公交车移动周期模型及性能分析 实验日期:2015年3月16日~2015年3月21日 实验报告日期:2015年3月22日 一.实验环境(网络平台,操作系统,网络拓扑图) ...

  2. 你以为你了解最常用的string.substring()的几个常见问题吗？

    ---恢复内容开始--- 前言: 1.项目中我们难免会用到各种对字符串的处理方法,可是你曾知道substring()这个用法别有洞天?你考虑过一下几个情况吗? 使用Substring()时的正确写法: ...

  3. ASP.NET-FineUI开发实践-4

    最近实在没时间研究东西,FineUI一直也没进一步实践,但是还是很想学点东西,所以找了个课题研究了下,在论坛里看见了又下角的提醒,自己想了想做了一个,我不是大神,接触EXTJS很少,就是用到哪看哪,没 ...

  4. OD: Heap Overflow (XP SP2 - 2003) & DWORD SHOOT via Chunk Resize

    微软在堆中也增加了一些安全校验操作,使得原本是不容易的堆溢出变得困难重重: * PEB Random:在 Windows XP SP2 之后,微软不再使用固定的 PEB 基址 0x7FFDF000,而 ...

  5. PHP常用代码大全

    1.连接MYSQL数据库代码 <?php $connec=mysql_connect("localhost","root","root" ...

  6. Android学习手记(4) BroadcastReceiver监听电池信息

    Android 中,Broadcast是一种在应用程序之间进行传输信息的机制.BroadcastReceiver对发送过来的Broadcast进行过滤和响应.根据这种机制,我们可以获取电池现有电量等信 ...

  7. maven项目，去除jar包中的不想要的依赖关系（Document root element "beans", must match DOCTYPE root "null". ）

    maven dependencies中并不会删除 以下方法maven dependencies中并不会删除,可能程序引入的时候,会去掉这种依赖(猜的) 解释: 就是说项目中要用到某一个a.jar包,通 ...

  8. 图文教程：手把手教你用U盘安装Ubuntu

    说到ubuntu,有接触linux的童鞋都应该听过,用wubi安装只是像在电脑上安装一个软件,可以轻松体验ubuntu,不过毕竟性能会打折扣,所以本人是比较喜欢直接安装在硬盘上的. 这种方法只适合用d ...

  9. javascript 倒计时代码

    <script language="javascript" type="text/javascript"> var interval = 1000; ...

  10. JBPM4.4GPD设计器中文乱码问题的另一种解决方法

    在eclipse中使用JBPM4.4的设计器时,输入中文后直接查看Source发现xml里中文全都乱码了,这时候大约整个人都不好了!赶紧百度.谷歌,搜到的多数结果都是要你在eclipse.ini或my ...