AJAX 和 Masonry grid 有问题.砌体网格很简单,没有在正确的时间启动。
在滚动或使用参数搜索转到特定类别之前,效果非常好。
可以找到示例站点here .
砌体
Masonry 是一个 JavaScript 网格布局库。通常与 Bootstrap 或其他未正确对齐项目的网格系统一起使用。示例:
仅自举:
引导和砌体:
滚动时
下一列将添加到旧列之上。提供与 unloaded images 几乎相同的输出这使得图像重叠。这通常可以通过使用我已经包含在提供的代码中的 imagesLoaded
来解决。
使用参数搜索时
Masonry 在 AJAX 之后没有被解雇。这意味着它根本不起作用。所以柱子在没有砌体的情况下被加载。
请参阅sample site .
滚动搜索和参数搜索均由 Toolset 提供.他们有一个很好的系统,可以很容易地在特定时间加载 JS:
- 在AJAX Pagination with Toolset之后已经完成。
- 当触发参数搜索时。
- 收集参数搜索数据时。
- 更新参数搜索表单时。
- 更新参数搜索结果时。
所以在分页之后和之前/期间/之后Parametric search .由于问题是在滚动之后,并且在参数搜索的结果更新之后,我想在这一刻启动 Masonry 网格。
最简单的示例是滚动完成时,也称为分页。
我尝试过的
我使用了 reloadItems
,因为我猜是正确的。如果我错了,请纠正我。 Resource .
jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
$container.masonry('reloadItems')
});
根据我的理论,它会在滚动时重新加载所有项目,因此它们会被正确排列。但它没有任何改变。
我也试过以下方法:
jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
var $container = $('.masonry-container');
$container.imagesLoaded(function() {
$container.masonry('reload');
$container.masonry({
isInitLayout : true,
itemSelector: '.col-md-3'
});
});
//and on ajax call append or prepend
$container.prepend($data).imagesLoaded(function(){
$container.masonry( 'prepended', $data, true );
});
});
我还尝试在参数搜索结果更新后重新加载项目。
jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
$container.masonry('reloadItems')
});
但这也不起作用。
Masonry 也使用其中一种方法添加到页脚中。
(function( $ ) {
"use strict";
var $container = $('.masonry-container');
$container.imagesLoaded( function () {
$container.masonry({
columnWidth: '.col-md-3',
percentPosition: true,
itemSelector: '.col-md-3'
});
});
})(jQuery);
你有什么想法吗?我哪里做错了?
编辑 1:
控制台错误
加载页面时
Uncaught ReferenceError: data is not defined
滚动时
Uncaught ReferenceError: $container is not defined
函数改成如下
(function( $ ) {
// Initiate Masonry
"use strict";
var $container = $('.masonry-container');
$container.imagesLoaded( function () {
$container.masonry({
columnWidth: '.item',
percentPosition: true,
itemSelector: '.item',
isAnimated: true // the animated makes the process smooth
});
});
$(window).resize(function() {
$('.masonry-container').masonry({
itemSelector: '.item',
isAnimated: true
}, 'reload');
});
})(jQuery);
//and on ajax call append or prepend more items
var $data = $(data).filter(".item");
$container.prepend($data).imagesLoaded(function(){
$container.masonry( 'prepended', $data, true );
});
更新图像加载到最新版本
我也更新了 imagesloaded 到最新版本。
可以找到脚本here .
添加了.item
我添加了类 .item
而不是使用 col-md-3,因为我认为这是一个更好的解决方案。
意味着 HTML 现在是这样的:
<div class="container">
<div class="masonry-container">
<div class="item">
<!-- Content comes here -->
</div>
<div class="item">
<!-- Content comes here -->
</div>
<div class="item">
<!-- Content comes here -->
</div>
<div class="item">
<!-- Content comes here -->
</div>
...
</div>
</div>
等等。
仍然是控制台错误。
有什么解决办法吗?
最佳答案
通过删除一些重复等问题解决了这个问题。
然后使用以下内容:
(function( $ ) {
"use strict";
var $container = $('.masonry-container');
$container.imagesLoaded( function () {
$container.masonry({
columnWidth: '.item',
percentPosition: true,
itemSelector: '.item'
});
});
$( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
$container.masonry('reloadItems').masonry();
});
$( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
$container.masonry('reloadItems').masonry();
});
$( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
$container.masonry('reloadItems').masonry();
$container.imagesLoaded( function() {
$container.masonry();
});
});
$( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
$container.masonry('reloadItems').masonry();
$container.imagesLoaded( function() {
$container.masonry();
});
});
})(jQuery);
这是在 footer.php 中添加的。
关于javascript - Initiate Masonry - 在无限滚动和参数搜索之后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38712783/