0

我正在尝试将 Masonry 集成到现有的修改过的 Wordpress 站点中。我最初将脚本编写为$(document).ready，但遇到了非常常见的计时问题，导致图像重叠，因此我将其重写为$(window).load。图像现在以标准的单列布局加载，而 Masonry 永远不会加载。我尝试过以多种方式编写订单，但还没有看到任何进展。我无法简单地告诉 jQuery 需要注意什么高度，因为每个图像的大小都不同。

*我确定最初的问题是时间问题，因为页面加载了重叠的图像，但是当我点击另一个页面然后返回时，砌体布局会完美地重新加载。

脚本

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;
}

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

4

1 回答 1

0

好吧尝试使用jQuery而不是$

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

我已经在您的 Chrome 页面上对其进行了测试，并$('#linky')给出了错误但jQuery('#linky')可以正常工作。好像你在jQuery.noConflict()某个地方打电话，因为你也在使用jQuery(function()而不是$(function().

于 2013-01-17T02:47:27.757 回答