雨夜带刀's Blog

再谈等高瀑布流布局的算法

之前有写过一篇非等宽图片列表的布局的博文,那只是这种布局之前的叫法,为了和常规的等宽瀑布流布局做区分,根据这种布局的特性(整行是等高的),那么就叫等高瀑布流布局吧。

怎么又拿这种布局出来说事?最近几天在对以前开发的360图片搜索结果列表页的图片尺寸和交互效果做一些细节上的调整。同时也对布局的算法做了优化,之前采用的是以宽度裁切为主和夹杂着一些等比缩放的算法,当时是为了让每一行看起来高度都一致。由于宽度裁切的效果会让图片左右边缘部分有损失,而且当时也有图片 hover 时的放大效果在一定程度上弥补了这种损失。这次放弃了宽度裁切,也去掉了 hover 时放大图片的效果,全部采用了等比缩放的算法。

在上一篇博文中谈到的等比缩放的算法其实并不是最优的,还是会有一定的上下或者左右的裁切。研究了一下 Google+ 的相册使用的等高瀑布流布局的缩放,发觉还有一种更优的缩放计算的算法,于是花了两个小时将这种算法推演了出来。这里先检讨下,由于智商上的缺陷,数学绝对是我的弱项,这种算法比之前的要简单得多,之前是走了弯路了。

非等宽图片列表的布局

各大搜索引擎的图片频道的搜索结果页,搜索出来的结果都是较零碎的图片,图片质量、尺寸都是参差不齐的,并限定了每一行的总宽度。这种非等宽的图片列表,在Google+、flickr也都有用到。

searchlist_demo

最近刚好对360搜索的图片搜索结果页进行了一次重构和改版,对于这种图片布局也花心思研究了一番,接下来说说我的一些处理思路。

非等宽的单个图片要排列到一个固定了宽度的容器中,那么这个等宽的容器就是最大的限制和障碍,开始怀念那种常见等宽瀑布流的布局(没有限制真好)。

先理下基本的需求:

  • 1、图片的宽度是不固定的;
  • 2、图片的高度是固定的;
  • 3、每行图片的总宽度是固定的,所以每行能容纳的图片的数量是无法确定的;
  • 4、确保图片质量不变,不能有拉伸变形导致图片失真的情况出现;
  • 5、图片之间的间距是固定的;

一淘九宫格的面试题

来自一淘的 WEB 前端的面试题,题目要求如下:

使用 HTML+CSS 实现如图布局,border-width:5px,格子大小是 50px*50px,hover时边框变成红色,需要考虑 IE6+ 和语义化的结构。

题目不难,主要还是考察面试者对 CSS 灵活运用程度。

一淘九宫格的面试题

以下 DEMO 是来自 JavaScript 罗浮宫3群好几个群员的 DEMO。

查看演示

如果你也有兴趣,不妨试试。

未知高度的图片垂直居中

<p>图片的宽度和高度是未知的,没有固定的尺寸,在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中。最近的在做的项目就有这个需求,所以先把一些常用的方法都收集整理了一下。</p>
<p>下图是理想中的效果图,外部容器的宽度和高度固定,中间的图片宽度和高度未知,但是图片要始终要相对于外部的容器垂直居中。</p>
<div class="art_inner_img"><img src="http://stylechen.com/wp-content/uploads/2010/12/img_middle.jpg" alt="理想的图片垂直居中效果图" /></div>

CSS清除浮动

<p>“90%的CSS布局的兼容问题都是浮动布局引起的”,这是我无意中听到某位前端人员的抱怨。</p>
<p>某位新手朋友经常问起我浮动布局的时候该如何清除浮动,我回答过N次,但这位新手朋友好像始终记不住,总是会在这里出问题,包括我自己也时常会在这个问题上纠结。上面提到的90%的这个概率可能并不准确,但也反映出了前端人员在这个问题上或多或少的要纠结一番,新手会时常犯难,老手也不一定就不犯傻。</p>
<p>我总结了一下以往几种清除浮动的方法,发觉方法还是挺多的,那么有没有一种最优的方法可以实现一劳永逸呢?且看下面的几种方法先。</p>
<h3>空标签法</h3>
<p>在浮动元素后加一个空标签,空标签上定义一个清除浮动的类:</p>
<pre class="brush: c-sharp">
&lt;style type="text/css"&gt;
.clear{ clear:both;height:0;overflow:hidden; }
.float_left{ float:left; }
.float_right{ float:left; }
&lt;/style&gt;
<div class="float_left">左浮动元素</div>
<div class="float_right">右浮动元素</div>
<div class="clear"></div>
</pre>

头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。
第 1 页,共 2 页12