简单瀑布流代码实现

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. 秒味课堂Angular js笔记------$scope.$watch和$scope.$apply

    $scope.$watch(watchFn , watchAction , deepWatch) 其中,watchFn是带有angular表达式或函数字符串: watchAction是一个函数或者表达 ...

  2. 【转】Android开源项目 分类 便于查看

    之前转载了一个开源项目的文章,发现那些都是没有系统的总结,这里又转载一篇有系统总结的文章. Android开源项目系列汇总已完成,包括: Android开源项目第一篇——个性化控件(View)篇 An ...

  3. ASP.NET获取根目录的方法集合

    编写程序的时候,经常需要用的项目根目录,自己总结如下: 1.取得控制台应用程序的根目录方法 方法1.Environment.CurrentDirectory 取得或设置当前工作目录的完整限定路径 方法 ...

  4. Linux系统文本命令快速登录与退出

    Linux是一个多用户的操作系统,用户要使用该系统,首先必须登录系统,使用完系统后,必须退出系统.用户登录系统时,为了使系统能够识别自己,必须输入用户名和密码,经系统验证无误后方能进入系统.在系统安装 ...

  5. Linux && vim 批量替换

    Linux批量文件的字符串替换 sed -i "s/oldstring/newstring/g" `grep oldstring -rl path` vim多行替换::1,2s/s ...

  6. [转]SGI STL 红黑树(Red-Black Tree)源代码分析

    STL提供了许多好用的数据结构与算法,使我们不必为做许许多多的重复劳动.STL里实现了一个树结构-Red-Black Tree,它也是STL里唯一实现的一个树状数据结构,并且它是map, multim ...

  7. ubuntu自动挂载windows分区和开机自动启动wallproxy

    1. 自动挂载windows分区 ubuntu默认是要点一下相应的盘符才会挂载windows分区的. 今天发现了ubuntu下最简单的自动挂载windows分区的办法.... :) 参考如下方法:ht ...

  8. swfupload上传

    swfupload多文件异步上传 多文件选择异步上传的原理 传统上:多个文件逐一选.PHP开始处理,循环上 PHP+Flash上:JS调用flash控,Flash批量选取并保持选取所有文件列 swfu ...

  9. jquery与discuz冲去的解决方法

    把相应的JQUERY代码天下如下代码: <script type="text/javascript"> jQuery.noConflict(); </script ...

  10. iOS网络编程-ASIHTTPRequest框架同步请求－备用

    在ASIHTTPRequest框架中与HTTP请求相关的类有:ASIHTTPRequest和ASIFormDataRequest,其中最常用的是ASIHTTPRequest,ASIFormDataRe ...