BlocksIt.js瀑布流插件结合ajax实现无限加载数据

        最近无聊，搜索了网络上的瀑布流插件，最终下载BlocksIt.js的插件，在结合ajax异步获取数据。实现滚动无限加载数据。

一开始以为只要把append添加内容地方替换为ajax方法就可以了，结果一测试完才发现有好多问题。

一：数据一开始无法重排？？

function ajaxData(page){$.get("getData.asp", {"curpage" : page}, function(result){if(result != ""){$('#container').append(result);}});}$(function(){    //初始化图片    ajaxData(1);    $('#container').BlocksIt({//执行瀑布流命令                numOfCol:5,                offsetX: 8,                offsetY: 8            });    })

        起先我是把瀑布流插件执行命令，放在了ajax获取数据函数的外面，结果却发现这个并没有起作用，

然后我一直往下拉动，发现又可以了。然后在返回顶部发现有些图片，可以发现最开始的加载的那些图片并没有改变定位属性，导致无效。

        于是我猜测是不是由于首次图片加载的原因？？不能使用ajax？？为了证实这个想法，我把初始化ajax函数注释掉，在代码里头直接使用asp加载了20来张图片，然后在运行页面。可是还是发现同样的结果。

        最后对比原插件命令，才注意到$('#container').BlocksIt()这个命令是仅仅跟在加载数据【appendTo()】的后面的。然后我在把asp初始化图片命令都去掉，转为ajax加载函数引用，然后把这个命令移入到ajax函数里头，运行插件。谢天谢地，总算是对了。【但是，唯一不了解是为什么先加载完数据使用$('#container').BlocksIt()这个来对图片进行重排会无效？同样都是在加载完调用的，只不过一个是在执行完函数调用，一个是直接在函数里头等待数据添加到dom节点就执行的。】

二：鼠标滚动加载ajax数据事件被多次调用？？

$(function(){var curpage = 1;//定义一个全局变量page//初始化图片ajaxData(1);$(window).scroll(function(){    // 当滚动到最底部以上50像素时， 加载新内容if ($(document).height() - $(this).scrollTop() - $(this).height()<50){curpage++;//一滚动变量自动递增ajaxData(curpage);}});

        一直搞不懂什么原因，查找了很多资料也都不明白为什么？有看到说用延迟来加载，然并卵，还是被加载了好多次。最终，找到一个方案，也是在全局设定开关。然后判断是否开启开关，立刻将开关关闭，等ajax加载完吧开关在开启。完整js代码如下：

<script type="text/javascript">var isStop=0;//触发开关，防止多次调用事件..全局变量function ajaxData(page){$.get("getData.asp", {"curpage" : page}, function(result){if(result != ""){$('#container').append(result);$('#container').BlocksIt({numOfCol:5,offsetX: 8,offsetY: 8});isStop = 0;}});}$(function(){var curpage = 1;//定义一个全局变量page//初始化图片ajaxData(1);$(window).scroll(function(){    // 当滚动到最底部以上50像素时， 加载新内容if ($(document).height() - $(this).scrollTop() - $(this).height()<50){if(!isStop){isStop = 1;curpage++;ajaxData(curpage);}}});});</script>

        然后，后端我是使用的asp语法来获取数据的，当然关键获取sql固定条数是根据sql的分页查询【between and】来实现的，如下sql语句：

select * from (select *, row_number() over (order by id) rn from [tb1] s left join [tb2] m on s.m_id = m.id) as T where T.rn between "& ((curpage - 1) * ipagesize + 1) &" and "& curpage * ipagesize 

资源【资源里头的数据是先用access替代，结果发现他没有row_number方法只有top n这种方式】：

http://download.csdn.net/detail/eadio/9170207

拓展：

插件官方网站：http://www.inwebson.com/jquery/blocksit-js-dynamic-grid-layout-jquery-plugin/

BlocksIt.js工作原理：

给选中的元素加上absolute属性，重新定位。然后根据以下标准计算top和left定位：

        1、从左往右一个块一个块元素的排

        2、根据将新的块放置到上一排最矮的块元素下方。

怎么使用BlocksIt.js：

        1、引入jq和BlocksIt.js脚本文件，注意jq脚本不低于jQuery 1.7.1，官网标明了没有对低版本进行测试【It should works well with jQuery 1.7.1 (haven’t tested for lower version)】。

        2、直接调用方法【.BlocksIt()】，需要注意的是，在调用方法前，如果你的块元素里头包含img标签，那么需要保证所有的图片具有实际高度，否则必须保证图片都载入窗体。可以使用$(window).load() 确保一切Dom节点都加载完毕，也可以使用某些图片插件来检查图片载入状态。

方法参数配置

        1、numOfCol            Int          5          创建的列数，默认5列

        2、offsetX                  Int          5          每个块左右间隙【margin-left 和 margin-right，默认是5px】

        3、offsetY                  Int          5          每个块上下间隙【margin-top和 margin-bottom，默认是5px】

        4、blockElement     String    ”div”     将指定的子元素转换为块【data-size属性指定该子元素块占据多大尺寸】

示例：

<div id="container"><div class="grid class">...</div><div class="grid class2" data-size="2">...</div><div class="grid">...</div><div class="grid class" data-size="3">...</div><div class="grid">...</div></div>

最终脚本引用：

$(document).ready(function() {    $('#container').BlocksIt({        numOfCol: 5,        offsetX: 8,        offsetY: 8,        blockElement:'.grid'    });});

显示：