列表是常用的控件，于是要想想怎么弄好它。
一、布局迷思
话说 N 久之前，矩阵型的布局是用 <table> 做到的，那时我为这个算法研究过一阵子（从菜鸟来……）。后来 CSS 布局渐替，到 CSS3，出现过几种布局方案。
- 浮动，设置 float:left
- 内联级块，设置 display:inline-block
- CSS 3 弹性布局，设置 box/box-flex/box，根据版本新旧而不同
他们的优缺点如下表，
| float:left | display:inline-block | box/box-flex/box |
| 经典方案，各浏览器都支持 | 可解决 float:left 高度不一致的问题，除早期 ie 外，各浏览器都支持 | 完美的解决上述问题，而且更灵活，参见我之前写的。 |
| 不能等高，高度不一致出现布局错位 | 有间隙空白的问题，比较蛋疼 | 老版 box 居然不支持换行（参见：“由于老版语法对多行支持不好”），这个很致命，而且版本繁杂，不易书写 |
经过一番权衡，最后还是采取 float:left 的方案。针对其相关问题会特定的解决即可。例如高度不一致出现布局错位，针对该问题，我想到两个方法，各有优劣：
- 因为屏幕宽度、列数是固定的，所以可以计算 item 的最终宽度，相关方法参见《多列列表控件中图片尺寸处理的若干问题》。
- 遍历图片，取一固定高度，然后其余强行统一即可。这是图片加载并显示后的动作，有一点延迟性并导致 reflow，而且 resize 事件（也就是切换横竖屏的时候）这个有问题。但这种写法比较简单，现正采用。
既然多列的矩阵型布局可以做了，那么单列的列表便不成问题。
二、各种杂项特性
要打造称心如意的列表控件，细节不能错过，一般该怎么弄就怎么弄吧，
MVC
- 内容如何渲染？
- item 项
- 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、怎么才能让图片不变形、等高等宽诸如此类的问题，着实是个大问题，而且不是三言两语可以讲清楚的，参考《非等宽图片列表的布局》
三、小结
有待补充，不吝赐教！
