简单瀑布流代码实现

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. js动态新增组合Input标签

    var x = 1; function addlink() { var linkdiv = document.getElementById("add1_0"); if (linkd ...

  2. js设置元素的onclick传参方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...

  3. Vim+Taglist+Ctags(源码阅读).

    终于搞定了,之前弄那么两天配置,都不成功. 需要软件: ctags taglist 1,ctags. 1)说明: 这个我就不演示了,我的RedHat5.5本身就有ctags. 2)验证ctags是否已 ...

  4. preventDefault() 方法 取消掉与事件关联的默认动作

    前几天写的 响应键盘的图片切换 中, 键盘总是让浏览器滚动,为了取消掉默认的事件,使用了 preventDefault() 方法 定义和用法 preventDefault() 方法取消事件的默认动作. ...

  5. 学OpenGL的一些好的网站

    好的资源太多,自己懂的太少,而今迈步从头越!!fighting...... 一些OpenGL资源链接 这是前几天自己简单整理的几个链接,希望对大家有用 顺便问一下http://www.spacesim ...

  6. （原）C++中指针不初始化就传递的问题

    C++中指针的使用.以前在使用指针之前都会初始化.今天没有初始化,然后指针传递后没有内容(testptrnoret),后来发现返回指针的话(testptrret),就可以了. // testptr.c ...

  7. Supervisor的一些基础使用

    Supervisor是一个进程监控程序. 满足的需求是:我现在有一个进程需要每时每刻不断的跑,但是这个进程又有可能由于各种原因有可能中断.当进程中断的时候我希望能自动重新启动它,此时,我就需要使用到了 ...

  8. 制作EDM 邮件规范

    邮件模板最主要是保证兼容性,很多邮箱的过滤规则不同,因此邮件页面要使用最简单原始的代码实现内容展现. 一,采用table嵌套布局,避免用div布局,因为DIV布局会用到float等浮动样式,一些邮箱会 ...

  9. 利用js得到某个范围内的整数随机数

    Math.random()方法可以返回(0,1)之间的随机数,不包括0和1. 套用公式:Math.floor(Math.random()*可能的值的总数+第一个可能的值) 如得到(3,9]之间的随机数 ...

  10. WDCP控制面板安装卸载

    安装 安装源码 WDCP提供两种安装模式,一种是源码安装,一种是RPM包安装,众所周知,源码安装虽然安装时要比RPM包安装繁琐,但是使用上要节省内存.所以我这里主要介绍源码安装. 首先是下载安装源代码 ...