瀑布式布局是一种多列等宽不等高的一种页面展示方式,用于图片来源比较复杂,图片尺寸比较复杂时可以使用的一种展示方式,这种展示方式比较优美,让人有种错落有致的感觉.这种展示方式在淘宝的我要买,新浪微博的广场以及蘑菇街等等网站都有应用.这里是我刚刚做的一个小站91美图
实现布局有三个思路:
- 最传统的思路,多弄几个容器,分几列,然后往每个列里面插入元素.其实用table分几列实现更加方便:P;
- 使用html5中css3的多列布局来实现.参见w3c标准中的css3多列布局模块;
- 使用绝对布局,通过javascript生成元素的布局位置.
前两种方法在网上都有比较详细的介绍,我这里就不再多说了,这里主要说一下我做的第三种实现的优缺点以及我的实现思路.
第三种方案是所有的要布局的元素都是绝对定位的,然后通过javascript来判断每个元素位置,动态设置位置实现布局.
缺点
需要使用javascript来遍历元素,然后要根据前一个元素来判断后一个元素的位置,这样可能对一些老版本的浏览器造成负担,特别是IE6这种 老古董,而且在javascript失效的时候,整个页面的布局都会乱掉.另外如果整个页面宽度是变化的,则可能每次窗口尺寸改变时都要重新计算所有元素 的位置,在页面中元素较多的时候可能会有闪烁的现象.另外如果页面中出现图片,则需要实现定义好图片的尺寸,否则会出现无法正确计算元素位置的情况.
优点
布局更加灵活,元素绝对定位,可以使用javascript灵活操作.页面宽度改变时可以重新布局整个页面.可以使页面的中的元素真正流动起来,让新添加的元素插入到高度最低的列,使页面的低端更加整齐,对插入的元素高地要求较低.可以较为方便的实现延迟加载.
具体实现
最开始我实现的时候是通过使用javascript生成虚拟的列,根据元素的顺序为每个元素分配一个列和行,然后计算每个元素的位置,举个例子,现在假设有四个列:
使其在页面中布局.事实上这个解决办法跟第一种和第二种是一个道理的.最后页面每列的高度差别可能会很大.
//getElements()方法用于获取页面中的元素 var items = getElements(); var columnCount = 4; var columnWidth = 230; var padding = 8; //遍历所有元素 for(var i = 0, len = items.length; i < len; i++){ //获取当前的元素 var currentItem = items[i]; //获取当前对象的列 var currentColumn = (i + 1) % 4; //获取当前对象的行 var currentLevel = parseInt(i / 4); //有了当前的行跟列可以根据上一层的对象计算出当前对象的高度 var left = currentColumn * columnWidth; var top = items[i - 4] ? 0 : items[i - 4].style.top + items[i - 4].clientHeight + padding; //设置当前的位置 currentItem.style.top = top + 'px'; currentItem.style.left = left + 'px'; }
代码和逻辑都比较简单,根据当前的行跟列计算出位置就行了.但是这个逻辑还是会出现元素高地差距过大的情况.看一下新浪weibo的广场图片效果:
可以看到越到最后可能列高度之间的差距会越大.这不是我们想要实现的效果.
所以我这里换了一个思路,虚拟的列还是要有的,但是行的概念我们抛弃掉,我采用的是一个类似流动的概念,新插入的元素是根据每个列的高度,那个高度 最低就流向哪个列,最后确保每个列的高度都趋近一致,实现我们想要的效果.当然我们可以采取获取所有元素的高度,然后统一计算一下,获取一个最佳的排列方 法,但是这会给浏览器带来较大的计算量,而且如果不断的加载更多的图片我们会得不偿失,所以我们采用的是一个流动的模型,只让当前对象寻找最低的高度然后 插入.
这里我实现了一个Column
对象,一个ImgItem
对象.Column
对象用于维护每一列的信息,包括列的最到高度列宽度等列信息.ImgItem
对象保存了一个html节点对象,还有一些设置元素位置,获取当前元素位置的方法.
下面是Column对象的代码:
var Column = function(order){ this.order = order; this.maxHeight = 0; this.columnWidth = 230; this.left = this.columnWidth * order; this.lastItem = null; this.positioned = false; this.setReferItem = function(item){ this.lastItem = item; } this.getHeight = function(){ if(this.lastItem){ this.maxHeight = this.lastItem.getBottom(); } return this.maxHeight; } this.getLeft = function(){ return this.left; } };
ImgItem对象的代码:
var ImgItem = function(referNode, column){ this.referNode = referNode; this.bottom = -1; this.positioned = false; }; ImgItem.prototype = { /* *set the refer node's top * @param value: Number */ setTop: function(value){ this.referNode.style.top = value + 'px'; }, /* *set the refer node's left * @param value: Number */ setLeft: function(value){ this.referNode.style.left = value + 'px'; }, /* *get the refer node bottom position */ getBottom: function(){ if(this.positioned){ if(this.bottom < 0){ this.bottom = parseInt(this.referNode.style.top) + this.referNode.clientHeight; } return this.bottom; }else{ throw("current node has not been positioned!"); } }, setPosition: function(column){ this.positioned = true; this.setLeft(column.getLeft()); this.setTop(column.getHeight() + 10); column.setReferItem(this); } };
基础打好了,下面要做的就是给元素进行布局了:
//首先根据配置信息中的列数初始化列 for(var i = 0, len = this.config.columnCount; i < len; i++){ this.columns.push(new Column(i)); } //获取页面上已存在的对象 var liItems = document.getElementById('img_list').getElementsByTagName('li'); //将所有的对象进行布局 for(i = 0, len = liItems.length; i < len; i++){ this.addNewItem(liItems[i]); }
好吧这里还用到了一个addNewItem方法:
getMinHeightColumn: function(){ var minHeight = -1, tempColumn = null; //遍历所有的列,获取当前高度最低的列,并返回 for(var i = 0,len = this.columns.length; i < len; i++){ if(minHeight > this.columns[i].getHeight() || minHeight == -1){ minHeight = this.columns[i].getHeight(); tempColumn = this.columns[i]; } } return tempColumn; }, getMaxHeight: function(){ var maxHeight = -1; //遍历列对象,获取高度最高的列并返回高度 for(var i = 0, len = this.columns.length; i < len; i++){ if(maxHeight < this.columns[i].getHeight()){ maxHeight = this.columns[i].getHeight(); } } return maxHeight; }, addNewItem: function(liItem){ //设置元素的位置 var imgItem = new ImgItem(liItem); imgItem.setPosition(this.getMinHeightColumn()); this.cachedItems.push(); //设置容器的高度 document.getElementById('img_list').style.height = this.getMaxHeight() + 'px'; }
基本的布局逻辑已经都齐了,还有的就是lazyload的一些逻辑了,这些逻辑都比较通用.加载后布局对象的逻辑是相同的.这里就不再赘述了.
抛砖引玉,如有谬误还请不吝指教.