Question

我正在尝试将Masonry集成到现有的修改后的Wordpress网站中。我最初将脚本编写为$（document）.ready但遇到了非常常见的时序问题，导致图像重叠，所以我重写为$（window）.load。现在，图像以标准单列布局加载，而Masonry从不加载。我尝试过多种方式编写订单，但还没有看到任何进展。我不能简单地告诉jQuery要知道什么高度，因为每个图像都是不同的大小。

*我确定原始问题是一个时间问题，因为页面加载了重叠图像，但当我点击另一页然后回来时，Masonry布局重新加载完美。

SCRIPT

jQuery(function($){
// Grid JS
/*
$(document).bind('keydown', 'Alt+Shift+g', function(){
$("div#container").toggleClass("grid");
});

*/
$('#linky').masonry({
singleMode: true, 
itemSelector: '.boxy' 
});

$('.boxy').hover(function() {
$(this).addClass('boxy-hover');
}, function() {
$(this).removeClass('boxy-hover');
});  
});

HTML

<div id="linky">
<?php
  $linksPosts = new WP_Query();
  $linksPosts->query('showposts=15&cat=-7');
?>
<?php while ($linksPosts->have_posts()) : $linksPosts->the_post(); ?>
<div class="boxy">
<div class="read">
<a href="<?php if(get_post_meta($post->ID, "url", true)) echo get_post_meta($post->ID,      "url", true); else the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>
</div>
<?php endwhile; ?>
</div>

CSS

#linky {
width: 1008px;
height: 100%;
} 

#linky .boxy {
width: 306px;
height: auto;
padding: 0 15px 15px 0;
margin-left: 15px;
}

.read {
height: auto;
}

.read img{
max-width: 306px;
height: auto;
}

任何帮助将不胜感激，谢谢！

Answer 1

请尝试使用jQuery代替$

jQuery('#linky').masonry({
    singleMode: true, 
    itemSelector: '.boxy' 
});

我在Chrome浏览器的页面上对其进行了测试，$('#linky')给出了错误，但jQuery('#linky')有效。您似乎正在某处调用jQuery.noConflict()，因为您还在使用jQuery(function()而不是$(function()。

Masonry Wordpress $（window）.load永远不会加载

1 个答案: