workmark

在一个容器当中 指定宽度后自动适应左右两边 并且要设置position：relative 因为li元素会根据它进行绝对定位

js
 var options = {
        autoResize: true, // 当浏览器窗口改变大小时自动更新布局
        container: $('#main'), // 父容器
        offset: 2, // 每个网格之间的距离
        itemWidth: 210 // 每个网格的宽度
	  };

又有 var handler = $('#tiles li');

      // Call the layout function.
      handler.wookmark(options);

网格此处指的是li元素 网格之间的距离指的是li元素上下左右与其他li元素距离 ，itemWidth指的是li元素的宽度 比如

html
<li><img src="images/image_3.jpg" width="200" height="252"><p>23</p></li>

css
li img
{
    display: block;

    padding: 5px;
    padding-bottom: 0px;
}

则itemWidth指的是200+5+5=210；计算容器的宽度 rows=3 （一排有3张图片）


则有 210*3+2*2 =634px 此时li在宽度方向刚好全覆盖完容器 此时第一个li left定位 刚好为0 要增加左右上下padding 5px 两种方法 第一个给容器增加10px width 第二种给容器padding 5px 第二种貌似可以 但是一试就知道即使调整窗口大小触发autoResize事件也无变化 第一个li left定位也为0 这是为什么呢 其实定位absolute 计算就是从父元素的border内侧开始的 不包含padding，有border效果


[img]http://dl2.iteye.com/upload/attachment/0108/4598/c29367b0-c947-3aea-892b-b3cc0d3a9561.png[/img]

padding效果
[img]http://dl2.iteye.com/upload/attachment/0108/4600/3c5f0d40-fbf0-3588-b2bb-ad35e06df71d.png[/img]注意右边与左边
设置包裹层的宽度：
公式 （itemWidth+offset）*rows- offset=minWidth
比如排3列最小宽度是（210+2）*3-2=634
比如排4列最小宽度是（210+2）*4-2=846
。。。。
当将width设为846时 刚好合适 左右无空格 改为845时 改动窗口大小 马上变为3列
这证明了上面关于最小宽度推理的正确性