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

本文链接：https://blog.youkuaiyun.com/eadio/article/details/48735995

本文详细探讨了使用瀑布流插件BlocksIt.js与AJAX异步获取数据实现滚动无限加载的问题，包括数据初始排列失效、鼠标滚动事件被多次触发等问题的解决方法，以及后端数据获取SQL分页查询的实现。通过调整插件调用时机和事件监听逻辑，最终实现了高效的数据加载与布局调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近无聊，搜索了网络上的瀑布流插件，最终下载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.youkuaiyun.com/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'
    });
});

显示：