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效果




padding效果
注意右边与左边
设置包裹层的宽度：
公式  （itemWidth+offset）*rows- offset=minWidth
比如排3列最小宽度是（210+2）*3-2=634 
比如排4列最小宽度是（210+2）*4-2=846
。。。。
当将width设为846时 刚好合适 左右无空格 改为845时 改动窗口大小  马上变为3列
这证明了上面关于最小宽度推理的正确性