简单瀑布流代码实现

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++线性序列容器<vector>简单总结

    C++线性序列容器<vector>简单总结 vector是一个长度可变的数组,使用的时候无须声明上限,随着元素的增加,Vector的长度会自动增加:Vector类提供额外的方法来增加.删除 ...

  2. 一个控制台贪吃蛇小游戏（wsad控制移动）

    /******************************************** * 程序名称:MR.DUAN 的贪吃蛇游戏(链表法) * 作 者:WindAutumn <flutti ...

  3. android-Activity的执行流程

    概述 The following diagram shows the important state paths of an Activity. The square rectangles repre ...

  4. nginx环境下搭建nagios 3.5.0，及配置pnp4nagios画图

    本文基于<LNMP最新源码安装脚本>,Nagios依赖PHP环境和perl环境,由于Nginx不支持Perl的CGI,需先来搭建Perl环境,Nagios原理介绍略.一.下载最新稳定源码包 ...

  5. IPTV中的EPG前端优化

    先看一下IPTV相关情况: l 目前TPTV市场情况 a) 截止今年2月,全国IPTV总用户数达3630.2万,我国移动互联网用户规模接近9亿,人均月接入量近300M,8M宽带达半数,光纤近4成. 图 ...

  6. 商务智能（BI）技术

    以下内容仅为兴趣爱好. 商务智能技术是将数据仓库.联机分析处理(OLAP)和数据挖掘等结合起来应用到商业活动中,从不同的数据源收集数据,经过抽取(Extract).转换(Transform)和加载(L ...

  7. setTimeout(fn, 0)引发的JavaScipt线程的思考

    起因 周五改一个checkbox的display属性被错误地设置为none的bug. 经debug发现, 有两个地方修改了display属性: 1) checkbox的controller; 2) c ...

  8. ECSTORE AJAX提交的实现

    今天向大家介绍在ecstore中怎样使用ajax提交数据 1 <script> //JAVASCRIPT代码 $$(".BB").ADDEVENT('CHANGE',F ...

  9. dede 日期的所有格式

    [field:pubdate function=strftime('%d',@me)/] 日 [field:pubdate function=strftime('%d日',@me)/] - [fiel ...

  10. php urlencode()函数URL编码转换实例解析

    URLEncode:是对网页url所包含中文字符的一种编码转化方式,URLEncode有两种常见方式,一种是基于GB2312的 Encode(Baidu.Yisou等搜索引擎使用),另一种是基于UTF ...