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

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. session过期后自动跳转到登陆页

    项目需要做一个自动登出的功能,查询了网上的资料,一开始准备用session监听做,按照下面方式配置监听器 1.在项目的web.xml文件中添加如下代码: <!--添加Session监听器--&g ...

  2. Linux 字符集

    摘抄自网络--/etc/sysconfig/i18n 文件:LANG="zh_CN.GB18030"SUPPORTED="zh_CN.GB18030:zh_CN:zh:e ...

  3. 新浪微博开放平台OAuth授权解决方案（含代码）

    前几日一位朋友项目中需要使用新浪微博的接口,故和这位朋友一同研究了新浪微博开放平台上面所提供的资料,首先要使用这些接口是需要用户登录并且授权的,新浪微博开放平台其实是提供两种授权方式的,第一种是:OA ...

  4. mongodb查询之模糊查询

    mongodb的模糊查询是用正则表达式来实现的.例子如下: db.COMMODITY_COMMODITY_SHOP.find({name:{$regex :/南京/i}})

  5. querydsl的好处

    http://www.querydsl.com/ 封装了很多访问不同数据层平台的方法,提供统一的通用框架(统一的书写格式,以一种通用的API方式来构建查询).便于抽成统一数据层,昨晚底层,以后其他模块 ...

  6. 嵌套repeater

    通过外层repeater的值来进行内层repeater的数据绑定 前台代码部分: <asp:repeater runat="server" id="repeater ...

  7. 安卓手机内外SD卡互换

    相信有許多人....有內置sd太小...外置sd(sdcard2或extsd)卻只能放資料.... 一些遊戲或者是影音播放軟體....根本不會去讀外置sd(sdcard2或extsd)..... 記憶 ...

  8. c#0银行存款计算器

    简介: 为银行存款客户提供一个超级计算器,简单直观操作界面,提供一个银行本意到期金额结算查询程序,方便用户选择存款方式. 功能截图: 实验步骤:利用工具栏建造窗体设计如图: 1.建立2个GroupBo ...

  9. QT5-控件-QSpinBox和QDoubleSpinBox（用于通过控件调整整数和小数）

    #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QSpinBox> #in ...

  10. C++拾遗（九）类与动态内存分配(1)

    创建类时编译器自动生成以下成员函数(如果用户没有定义): 1.默认构造函数 2.拷贝构造函数 3.赋值操作符 4.默认析构函数 5.地址操作符 以下一一说明: 构造函数 构造函数在创建对象时被调用. ...