masonry 结合ajax,并按需加载,
时间: 2023-08-01 20:11:30 浏览: 112
Masonry 是一个流式布局库,可以根据元素的大小自动排列网格。要结合 AJAX 实现按需加载,可以通过以下步骤实现:
1. 在 HTML 中创建一个容器,用于放置加载的内容。
2. 使用 AJAX 请求数据并将其加载到容器中。可以使用 jQuery 的 $.ajax() 方法或其他 AJAX 库。
3. 在 AJAX 请求成功后,使用 Masonry 的 append() 方法将新加载的元素添加到网格中。
4. 当加载的元素被添加到网格中时,调用 Masonry 的 layout() 方法重新排列网格。
5. 可以使用 Masonry 的 infinite scroll 插件实现无限滚动加载。
下面是一个简单的示例代码:
```html
<div id="container" class="masonry">
<!-- 已加载的元素 -->
</div>
<button id="load-more">Load More</button>
<script>
$(document).ready(function() {
// 初始化网格布局
var $container = $('#container').masonry({
itemSelector: '.item',
columnWidth: '.grid-sizer',
percentPosition: true
});
// 按钮点击事件
$('#load-more').click(function() {
$.ajax({
url: 'load-more.php',
success: function(data) {
// 将新加载的元素添加到网格中
var $newItems = $(data);
$container.append($newItems).masonry('appended', $newItems);
// 重新排列网格
$container.masonry('layout');
}
});
});
});
</script>
```
在该示例中,当用户点击“Load More”按钮时,会发送 AJAX 请求到 load-more.php 页面获取更多的元素。在请求成功后,将新加载的元素添加到网格中,并调用 Masonry 的 layout() 方法重新排列网格。请注意,该示例仅供参考,实际实现可能需要根据具体需求进行修改。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)