如何使砌体和Imagesloaded工作正确。 （WordPress的）

Question

我试图使用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，还是我必须自己链接？

Answer 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' ) );