masonry 结合ajax
时间: 2023-06-28 18:13:04 浏览: 53
Masonry 是一个 JavaScript 库,用于创建瀑布流式的网格布局。要结合 Ajax 使用 Masonry,您可以在 Ajax 响应中动态添加内容,并在添加新元素后重新布局网格。
以下是一个简单的示例:
1. 首先,确保在页面上包含 Masonry 库和 jQuery 库。
2. 创建一个包含网格的容器元素,例如:
```html
<div id="grid" class="grid"></div>
```
3. 然后,在 JavaScript 中初始化 Masonry:
```javascript
var $grid = $('#grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true
});
```
4. 在 Ajax 响应中,创建新的网格项并将其添加到容器中,例如:
```javascript
$.ajax({
url: 'your-ajax-url',
success: function(data) {
// Create new grid items from the response
var $items = $(data).find('.grid-item');
// Append the new items to the container
$grid.append($items);
// Tell Masonry to layout the new items
$grid.masonry('appended', $items);
}
});
```
这将在 Ajax 响应中添加新的网格项,并使用 Masonry 重新布局网格。