Javascript 瀑布流实现两种方式：固定列数浮动布局与绝对定位自适应宽度.docVIP

瀑布流已经火了一段时间了，自己最近才有空研究一下，网上关于瀑布流的帖子也很多，网上一般是说三种方式，固定列数的浮动布局，CSS3列布局，绝对定位布局 推荐两个关于瀑布流的帖子，写得比我详细多了： 这里主要是记录一下我的实现方式，用数组模拟的数据，也可以用AJAX实现读取数据，底部提供DEMO代码下载！ 一、固定列数的浮动布局 　　这种方式简单适用，先按照列数把布局固定好，然后在滚动事件中分别在每一列插入相应的数据既可，代码比较简单就直接折叠了： 　　其实就一个滚动加载事件。我这里没有做按高低排序。 　　 HYPERLINK /jsplay/waterfull/layout.html \t _blank 点击查看DEMO ? ? ?代码如下：　　 View Code 　　JS代码：　　 View Code ? 二、绝对定位实现的瀑布流，宽度自适应，resize重排 　　 HYPERLINK /jsplay/waterfull/absolute(object).html \t _blank 点击查看DEMO 　　绝对定位实现方式因为要获取每格的高度，然后根据高度来计算定位位置，所以必须要知道图片的高度，如果没有高度，定位就不准确，所以传递数据的时候需要图片的高度。 　　我是这样计算绝对定位的位置的，left根据列数来，这个略过，下面主要讲TOP值的获取： 　　比如如下的排列方式，数字代表格子 　　0 ? ?1 ? ? 2 ? ? 3 ? ?4 ? ? 5 ? ? ? 6 ? ?7 ? ?8 ? ?9 ? ? 10 ? 11 ? ? ?12 ? 13 ?14 ? 15 ? 16 ? 17 ? ? 第12格子的绝对定位TOP值 = ?第0格的高度（offsetHeight） + 相隔距离(margin) + 6格的高度(offsetHeight) + 相隔距离(margin)； 　 这里可以把每格的高度通过对象的属性记录下来，以免每次都进行offsetHeight的获取， HYPERLINK 我的代码里面没有体现出来。 ? ? ?这个计算就通过一个循环来实现： 　　计算定位的代码如下：? ? ? function sort(){ var num = getColumnNum(), left, top, column; //nowNum的作用是不让已经加载的数据重新计算定位排列 for (var j = nowNum, k = cells.length; j k; j++, nowNum++) { // 初始化top的值 top = 0; // 获取当前为第几列 column = j num ? j : j % num; // 计算可以得到当前列的LEFT值 left = column * (cellClientWidth + columnMarginRight); cells[j].style.left = left + px; if (j num) { // 第一列top值为0 cells[j].style.top = 0px; } else { // 计算TOP值，等于当前格子的顶上每列的高度相加 for (var m = column; m j; m = m + num) { top = top + cells[m].offsetHeight + columnMarginRight; } cells[j].style.top = top + px; } } } ?瀑布流绝对定位总代码如下： !DOCTYPE html html head meta charset=utf-8 title瀑布流布局（绝对定位）/title style type=text/css html, body{ height:100% }