简单瀑布流代码实现

html代码例如以下

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript" src="js/waterfall.js"/></script>

<title>瀑布流-zhangzhang</title>

<style type="text/css">

    *{padding: 0;margin:0;}

    #main{

        position: relative;

    }

    .pin{

        padding: 15px 0 0 15px;

        float:left;

    }

    .box{

        padding: 10px;

        border:1px solid #ccc;

        box-shadow: 0 0 6px #ccc;

        border-radius: 5px;

    }

    .box img{

        width:162px;

        height:auto;

    }

</style>

</head>

<body>

<div id="main">

    <div class="pin">

        <div class="box">

            <img src="./images/1.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/2.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/3.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/4.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/1.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/2.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/3.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/4.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/5.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/1.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/2.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/3.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/4.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/1.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/2.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/3.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/4.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/5.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/1.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/2.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/3.jpg"/>

        </div>

    </div>

      <div class="pin">

        <div class="box">

            <img src="./images/5.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/1.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/2.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/3.jpg"/>

        </div>

    </div>

      <div class="pin">

        <div class="box">

            <img src="./images/5.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/1.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/2.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/3.jpg"/>

        </div>

    </div>

      <div class="pin">

        <div class="box">

            <img src="./images/5.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/1.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/2.jpg"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="./images/3.jpg"/>

        </div>

    </div>

</div>

</body>

</html>

waterfallJS例如以下：

window.onload=function(){

    waterfall('main','pin');

    var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};

    window.onscroll=function(){

        if(checkscrollside()){

            var oParent = document.getElementById('main');// 父级对象

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

                var oPin=document.createElement('div'); //加入 元素节点

                oPin.className='pin';                   //加入 类名 name属性

                oParent.appendChild(oPin);              //加入 子节点

                var oBox=document.createElement('div');

                oBox.className='box';

                oPin.appendChild(oBox);

                var oImg=document.createElement('img');

                oImg.src='./images/'+dataInt.data[i].src;

                oBox.appendChild(oImg);

            }

            waterfall('main','pin');

        };

    }

}

/*

    parend 父级id

    pin 元素id

*/

function waterfall(parent,pin){

    var oParent=document.getElementById(parent);// 父级对象

    var aPin=getClassObj(oParent,pin);// 获取存储块框pin的数组aPin

    var iPinW=aPin[0].offsetWidth;// 一个块框pin的宽

    var num=Math.floor(document.documentElement.clientWidth/iPinW);//每行中能容纳的pin个数【窗体宽度除以一个块框宽度】

    oParent.style.cssText='width:'+iPinW*num+'px;margin:0 auto;';//设置父级居中样式：定宽+自己主动水平外边距

    var pinHArr=[];//用于存储 每列中的全部块框相加的高度。

    for(var i=0;i<aPin.length;i++){//遍历数组aPin的每一个块框元素

        var pinH=aPin[i].offsetHeight;

        if(i<num){

            pinHArr[i]=pinH; //第一行中的num个块框pin 先加入进数组pinHArr

        }else{

            var minH=Math.min.apply(null,pinHArr);//数组pinHArr中的最小值minH

            var minHIndex=getminHIndex(pinHArr,minH);

            aPin[i].style.position='absolute';//设置绝对位移

            aPin[i].style.top=minH+'px';

            aPin[i].style.left=aPin[minHIndex].offsetLeft+'px';

            //数组 最小高元素的高 + 加入上的aPin[i]块框高

            pinHArr[minHIndex]+=aPin[i].offsetHeight;//更新加入了块框后的列高

        }

    }

}

/****

    *通过父级和子元素的class类 获取该同类子元素的数组

    */

function getClassObj(parent,className){

    var obj=parent.getElementsByTagName('*');//获取 父级的全部子集

    var pinS=[];//创建一个数组 用于收集子元素

    for (var i=0;i<obj.length;i++) {//遍历子元素、推断类别、压入数组

        if (obj[i].className==className){

            pinS.push(obj[i]);

        }

    };

    return pinS;

}

/****

    *获取 pin高度 最小值的索引index

    */

function getminHIndex(arr,minH){

    for(var i in arr){

        if(arr[i]==minH){

            return i;

        }

    }

}

function checkscrollside(){

    var oParent=document.getElementById('main');

    var aPin=getClassObj(oParent,'pin');

    //创建【触发加入块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚究竟就開始载入)

    var lastPinH=aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2);

    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意解决兼容性

    var documentH=document.documentElement.clientHeight;//页面高度

    return (lastPinH<scrollTop+documentH)?true:false;//到达指定高度后 返回true。触发waterfall()函数

}

javascript--瀑布流的更多相关文章

  1. javascript瀑布流效果

    javascript瀑布流效果 其实javascript瀑布流 前几年都已经很流行了(特别是美丽说,蘑菇街),最近看到网上有人问这个瀑布流效果,所以自己有空的时候就研究了下,其实也是研究别人的代码,研 ...

  2. javascript瀑布流

    哇,瀑布流,是的,不错,不错,真的不错,很好玩的样子,于是自己想玩玩啊,来吧,就玩起. 循序渐进,我这里采用原生的js代码来书写.为了方便大家运行代码,我就全部样式和CSS都写在html里面了,当然还 ...

  3. JavaScript—瀑布流

    现在网页中需要翻页的列表,好多都已经改为瀑布流了.所以这个思路还是特别重要的 HTML Css 页面 因为每个图片的高度不一样所以她的 top 和left 我们待会通过JS计算 动态生成 js部分 思 ...

  4. JavaScript瀑布流代码

    function osCode(){ var boxWidth = parseInt($(".item").css('width')), marginTop = parseInt( ...

  5. web前端学习（四）JavaScript学习笔记部分（8）-- JavaScript瀑布流

    index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  6. JavaScript：实现瀑布流

    一.前言: 瀑布流现在是一个非常常用的布局方式了,尤其在购物平台上,例如蘑菇街,淘宝等等. 二.流程: 1.在html文件中写出布局的元素内容: 2.在css文件中整体对每一个必要的元素进行样式和浮动 ...

  7. 用JavaScript和jQuery实现瀑布流

    ▓▓▓▓▓▓ 大致介绍 在慕课网上学习了用原生js和jQuery实现瀑布流,在这里做个笔记 ▓▓▓▓▓▓ 用JavaScript实现 基本结构: <div id="main" ...

  8. JavaScript中作用域回顾（避免使用全局变量）（瀑布流的实现）（scroll事件）以及Django自定义模板函数回顾

    页面显示照片样式为瀑布流: 上面的div个数可以按照自己安排进行划分.img的分布可以使用模板标签以及自定义模板函数进行排布: 自定义模板函数实现可以看,最后几列:python---django中模板 ...

  9. 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流

    未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...

  10. JavaScript——原生js实现瀑布流

    瀑布流介绍及实现原理: 瀑布流是一种页面布局,页面上也有多等宽的块(块就页面内容),每一块都是绝对定位(absolute),每个块排列的方式如下:寻找现在高度最小的列,把该块定位到该列下方.需要知道, ...

随机推荐

  1. C#面向对象的一些笔记

    抽象 抽象类通常表示一个抽象的概念,提供一个继承的出发点.当设计抽下类时候,尽可能的拥有更多的相同代码,更少的数据. 抽象类.方法用abstract关键字修饰: 抽象成员不能是private. 抽象类 ...

  2. 解决“Word无法访问您试图使用的功能所在的网络位置”问题

    解决“Word无法访问您试图使用的功能所在的网络位置”问题 打开Word时出现现现在的对话框,按取消,又可以打开word文档 按取消时,仍然可以打开word文档.为了解决这个问题,我借助网络,知道这是 ...

  3. Property type 'id<tabBarDelegate>' is incompatible with type 'id<UITabBarDelegate> _Nullable' inherited from 'UITabBar'

    iOS报错:Property type 'id' is incompatible with type 'id _Nullable' inherited from 'UITabBar' 如图: 可能原因 ...

  4. PHP MySQLi

    PHP MySQLi 简介 PHP MySQLi = PHP MySQL Improved! MySQLi 函数允许您访问 MySQL 数据库服务器. 注释:MySQLi 扩展被设计用于 MySQL ...

  5. 武汉科技大学ACM ：1005: A+B for Input-Output Practice (V)

    Problem Description Your task is to calculate the sum of some integers. Input Input contains an inte ...

  6. 在QT中使用Irrlicht引擎的方法与步骤

      Ø 相关库,插件安装部分 本篇文档介绍在Qt5.2.0下面使用lrrlicht引擎在Qt窗口中输出(开发环境:vs2012) 1. 首先安装好Qt5.2.0,下载地址: http://downlo ...

  7. iOS开源 框架

    UI界面类项目: Panoramagl ——720全景展示 Panorama viewer library foriPhone, iPad and iPod touch MBProgressHUD — ...

  8. php生成短网址的思路与方法

    生成短网址的思路以及使用php生成短网址的实现方法. 生成短网址的思路:如果把短网址还原了,你知道是个什么样子的吗?比如:http://www.jbxue.com/sitejs-17300-1.htm ...

  9. 转载：详解CSS选择器、优先级与匹配原

    转载网址:http://polaris1119.javaeye.com/blog/764428 文章就CSS选择器的优先级问题做了一些总结,严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和 ...

  10. C#实现打印与打印预览功能（转）

    在windows应用程序中文档的打印是一项非常重要的功能,在以前一直是一个非常复杂的工作,Microsoft .Net Framework的打印功能都以组件的方式提供,为程序员提供了很大的方便,但是这 ...