[妙味Ajax]第二课：实例：留言板、瀑布流

知识点总结

 瀑布流原理（固定布局）

　　　　总宽度大小固定

　　　　每列宽度固定，比如LI，高度自动计算，每列使用float:left来布局

　　　　计算最短的一列，将Div插到最短的一列处（li里面包div)（getShort函数）

　　　　即

<ul>
    <li>
        <!--div是JS创建的-->
        <div></div>
    </li>
    <li></li>
    <li></li>
    <li></li>
</ul>

 　　鼠标滚轮事件(window.scroll):

　　　　判断：当最短的LI的高度+LI到页面顶部的高度(getTop函数) < 滚动条高度+可视区的高度，需要加载另外一批的数据

　　　　注意：由于scroll的连续触发的事件，会导致加载了N批数据，解决办法需要用到boolean来判断，每次只加载一批数据

//获取最短Li的位置
function getShort(){
     var index = 0;
     var ih = aLi[index].offsetHeight;
     for (var i=1; i < iLen; i++) {
          if (aLi[i].offsetHeight < ih) {
               index = i;
               ih = aLi[i].offsetHeight;
          }
     } 
     return index; 
}

留言薄

　　1、导入数据库，通过接口文档和参数，来处理ajax数据

　　2、通过cookie来判断用户是否登陆，使用getCookie函数