常用的爆布流布局有两种:一种是浮动布局,一种是固定定位布局
浮动布局:
有几列的DIV(float),获取到的数据可以直接插入到对应的DIV中,这种布局比较简单,也比较常用的,不需要管各个模块的高度
几个关键点:
1.什么时候请求数据:document.documentElement.scrollHeight < document.documentElement.scrollTop + document.documentElement.clientHeight
还需要一个开关,避免在请求数据的时候,又请求数据,onOff = true,在请求数据时设为flase,请求完了,并且渲染完成再打开
2.可以需要传给服务器两个参数,第几页的第几段,为了防止页面加载太长了,一般加载10段,然后再分页,分页的信息由程序直接给出来(这里可以跟服务员商量好,怎么方便可以怎么出数据)
3.将请求到的数据循环添加到对应的列上(可以根据一个指针来存储对应的变量值)
例:n = arr.length根据(i%3)来分配到对应的列上
固定定位布局
只有一个DIV,获取到的数据插入到这个DIV中,每块数据定义left,top值
几个关键点:
上面两点同样适应这种布局
3.需要定位3个变量(假如只有3列),用来记录每列的高度
4.将每块的数据先从最小高度的列开始插入
5.图片的宽和高由服务器给出来,这样才能获取到每块内容的height,并且同时更新每列的高度
6.每块的top和left:{left:n*180,top:height1}//n是第几列,height1是这一列的高度
一般情况下使用浮动布局更简单,服务器那边配合也比较少,只管出数据就行