1

我正在尝试使用 Wordpress 3.9 中内置的 Masonry 设置网格样式。它工作得很好，除了网格在第一个页面加载时无法正确显示，但在第二个页面上进行调整。我猜这是因为我没有调用ImagesLoaded，并且网格在图像加载之前计算。这是网站：http ://www.skateflix.se

为了启动砌体，我在函数中使用它：

function my_masonry(){
wp_enqueue_script('masonry');
}
add_action('wp_enqueue_scripts', 'my_masonry');

我试过这个让 ImagesLoaded 工作但失败了，放在标题中：

<script>

//set the container that Masonry will be inside of in a var
var container = document.querySelector('.js-masonry');
  //create empty var msnry
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
msnry = new Masonry( container, {
    itemSelector: '.feed-item'
});
});
</script>

我的 HTML 如下所示：

<div class="js-masonry"
<div class="feed-item"
<div class="feed-item"
<div class="feed-item"
<div class="feed-item"
</div>

我在这里做错了什么？我有点困惑。wordpress 附带的 Masonry 版本是否包含 ImagesLoaded，还是我必须自己链接？

4

1 回答 1

1

好的让它工作。将此函数放在一个 .js 文件中（为您自己的容器和其中的类更改查询选择器和 Itemselector）：

(function( $ ) {
"use strict";
$(function() {
//set the container that Masonry will be inside of in a var
var container = document.querySelector('.js-masonry');
//create empty var msnry
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
    msnry = new Masonry( container, {
        itemSelector: '.feed-item'
    });
});
});
}(jQuery));

然后将其排入functions.php

wp_enqueue_script( 'masonry' );
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'masonryInit', get_stylesheet_directory_uri().'/js/masonry.js',      array( 'masonry', 'jquery' ) );
于 2014-09-07T11:10:01.910 回答