打造称心如意的列表控件

列表是常用的控件，于是要想想怎么弄好它。

一、布局迷思

话说 N 久之前，矩阵型的布局是用 <table> 做到的，那时我为这个算法研究过一阵子（从菜鸟来……）。后来 CSS 布局渐替，到 CSS3，出现过几种布局方案。

• 浮动，设置 float:left
• 内联级块，设置 display:inline-block
• CSS 3 弹性布局，设置 box/box-flex/box，根据版本新旧而不同

他们的优缺点如下表，

经过一番权衡，最后还是采取 float:left 的方案。针对其相关问题会特定的解决即可。例如高度不一致出现布局错位，针对该问题，我想到两个方法，各有优劣：

• 因为屏幕宽度、列数是固定的，所以可以计算 item 的最终宽度，相关方法参见《多列列表控件中图片尺寸处理的若干问题》。
• 遍历图片，取一固定高度，然后其余强行统一即可。这是图片加载并显示后的动作，有一点延迟性并导致 reflow，而且 resize 事件（也就是切换横竖屏的时候）这个有问题。但这种写法比较简单，现正采用。

既然多列的矩阵型布局可以做了，那么单列的列表便不成问题。

二、各种杂项特性

要打造称心如意的列表控件，细节不能错过，一般该怎么弄就怎么弄吧，

MVC

1. 内容如何渲染？
2. item 项
3. url 标识

分页

1、一般分页，提示最后一页

2、触底自动加载（未实现）

3、更优秀的列表渲染算法，无须记录翻页（未实现）。

4、分页加载中提示（未实现）

图片

1、应该有一个可通过参数指定高宽的图片服务器。挑选适合的图片分辨率视网屏适应， 根据 window.devicePixelRatio 适应，代码拟定如下：

function getCellRequestWidth(){
	window.devicePixelRatio = window.devicePixelRatio || 1;

	var screenWidth = window.innerWidth; // 获取视口宽度
	var columns = 3; // 列数，可双列或三列（取值：2|3），假设三列  

	var cellWidth = screenWidth * ( 1 / columns );// 求单元格实际宽度
	var cellHight = cellWidth / (4 / 3); // 实际高度。此为横图，竖图为 8/9
	var reqeustWidth = cellWidth * window.devicePixelRatio;
	reqeustWidth = Math.floor(reqeustWidth);
	var MaxWidth = 500;// 宽度上限
	return reqeustWidth;
}

2、加载背景图，图片未加载完成，在 placeholder 显示这是图片的位置

• 设置 background-image（PNG 优化压缩、转换 Base64 合并在 HTML 中，已节省文件大小、HTTP 请求、优先加载）
• 设置 <img /> 标签 alt 属性，会有加载提示文字

3、图片加载失败，替换为默认图片， onerr 事件。

4、Fx 特效，Fadeout 渐显，依次出现。使用 step.js 异步处理，十分好写！不过 iphone 好像还不能依次出现。

5、图片懒加载，结合分页。注意 onscroll 事件优化

6、怎么才能让图片不变形、等高等宽诸如此类的问题，着实是个大问题，而且不是三言两语可以讲清楚的，参考《非等宽图片列表的布局》

三、小结

有待补充，不吝赐教！