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

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. jQuery.each() 的5个案例

    1.基本的jQuery.each实例 看看 each() 函数是如何处理一个 jQuery 对象的.首先选取所有的a标签 并且打印出他们的href属性. 需要注意的是, 在 each() 当中使用 j ...

  2. Interpolator 插值器

    简介 Interpolator:撺改者,校对机,分类机,插补器 Interpolator 定义了动画的变化速度,可以实现匀速.正加速.负加速.无规则变加速等,这使得基本的动画得以实现加速.减速等效果. ...

  3. hdu 2186

    #include <iostream> using namespace std; int main() { int a,b,c,k1,k2,k3,m,n; cin>>m; wh ...

  4. jQuery节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作

    一．创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...

  5. 以下是jQuery和JavaScript实现相同操作的等价代码。

    选择元素  Javascript代码 1.// jQuery   2.var els = $('.el');   3.  4.// 原生方法   5.var els = document.queryS ...

  6. JAVA-5-关于for循环的几个例子

    打印一个*组成的矩形 public static void main(String[] args) { // TODO 自动生成的方法存根 for (int i = 0; i < 5; i++) ...

  7. uva 484 - The Department of Redundancy Department

    已有的数据结构装不下数据,或者不能处理现有的数据,那就必须要思考其他的辅助手段,辅助结构: #include <cstdio> #include <map> #include ...

  8. css与div小结

    前些时间学习css与div的课程 什么是css呢 Css 级联样式表或层叠样式表(Cascading Style Sheet) 是能够真正做到 网页表现与内容分离的一种样式设计语言.相对于传统HTML ...

  9. git clone 远程分支

    先初始化一个git 仓库  命令:git init git clone 相应的地址 这样就会形成一个.git 隐藏文件夹 一定要注意的,要进入到子文件夹去git checkout feature/0. ...

  10. php笔试题1

    PHP 基础知识部分 1. 求$a的值 复制代码 代码如下: $a = "hello"; $b = &$a; unset($b); $b = "world&quo ...