• [织梦吧]唯一域名:www.dedecms8.com,织梦DedeCMS学习平台.

当前位置: > 网页制作 > JavaScript >

js瀑布流网页源码分析

来源: www.dedecms8.com 编辑:织梦吧 时间:2013-06-02点击:

首先简单的html:

<ul id="wrap"></ul>

里面的模块君由js自动生成;

css内容:

*{padding:0;margin:0;}

#wrap li{width:250px;float:left;list-style:none;}

.boxCont{position:relative;margin:15px;border:1px solid #ccc;background:#eee;}

js内容:

1.因为瀑布流的列是根据浏览器的大小而确定的,所有首先需要确定瀑布流中的内容能生成几列;

2.确定列以后,首先布局第一行内容,均是浮动解决

3. 第一行内容确定后,开始计算第一行那一块最短,将排在第二行的第一块内容排在第一行最短的块下面,后面一次计算均是排在最短的一块下面;

 

详细代码:

var $id = function(o){ return document.getElementById(o) || o};

function sort(el){

        var h = [];

        var box = el.getElementsByTagName("li"); //所有瀑布Pin的集合

        var minH = box[0].offsetHeight,  //第一个Pin的高度

        boxW = box[0].offsetWidth, //因为等宽,第一个也是所有Pin的宽度

        boxH,

        n = document.documentElement.offsetWidth / boxW | 0;  //计算页面能排下多少列Pin

        el.style.width = n * boxW + "px";  //ul的宽度

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

                boxh = box[i].offsetHeight; //获取每个Pin的高度

                if(i < n) { //第一行Pin以浮动排列,不需绝对定位

                        h[i] = boxh;

                        box[i].style.position = '';

                } else {

                        minH = Math.min.apply({},h); //取得各列累计高度最低的一列

                        minKey = getarraykey(h, minH);

                        h[minKey] += boxh ; //加上新高度后更新高度值

                        box[i].style.position = 'absolute';

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

                        box[i].style.left = (minKey * boxW) + 'px';

                }

        }

};

/* 返回数组中某一值的对应项数 */

function getarraykey(s, v) {

        for(k in s) {

                if(s[k] == v) {

                        return k;

                }

        }

};

/* 随机创建Pin */

var pin = '';

for(i = 0; i < 30; i++) {

        height = Math.floor(Math.random()*200 + 200);

        pin += '<li><div class="boxCont" style="height:' + height + 'px;">'+i+'</div></li>';//这里生成的Pin高度是随机的,在传入需要的元素时,可以设置规则传入指定的高度

标签: 瀑布流

About D8

  • ©2014 织梦吧(d8) DedeCMS学习交流平台
  • 唯一网址 www.DedeCMS8.com 网站地图
  • 联系我们 1170734538@qq.com ,  QQ