我在网站上有一个标签元素，在每个标签中都使用了jQuery Masonry脚本。唯一的问题是Masonry网格只适用于第一个标签中的内容，但是我需要它来处理每个标签中的内容。
我已尝试为每个标签重命名容器，但似乎没有任何效果。
以下是网站：http://joltentertainment.com/services-2/
这是我的代码：
<ul class="services-tabs">
<li><a href="#tab1">Entertainment</a></li>
<li><a href="#tab2">Ambiance & Décor</a></li>
<li><a href="#tab3">Success</a></li>
<li><a href="#tab4" class="av">A/V Rentals</a></li>
</ul>
<div id="services-wrap">
<div id="tab1" class="tab">
<div id="services-container">
<div class="module">
<h3 class="service">Emcees</h3>
<div class="mini-gallery">
<div class="big-thumb"><img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=http://joltentertainment.com/wp-content/gallery/the-worlds-best-prom/em1_2782_1.jpg&h=172&w=278&zc=1" title="" width="278" height="172" /></div>
<div class="med-thumb"><img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=http://joltentertainment.com/wp-content/gallery/the-worlds-best-prom/em1_2443_0.jpg&h=82&w=188&zc=1" title="" width="188" height="82" /></div>
<div class="med-thumb"><img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=http://joltentertainment.com/wp-content/gallery/the-worlds-best-prom/em1_2787_1.jpg&h=82&w=188&zc=1" title="" width="188" height="82" /></div>
</div>
<p>
Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
</p>
</div>
<div class="module">
<h3 class="service">Percussionists</h3>
<div class="mini-gallery">
<div class="big-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
</div>
<p>
Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today. Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd!
</p>
</div>
<div class="module">
<h3 class="service">Elegant Event Furniture</h3>
<div class="mini-gallery">
<div class="big-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
</div>
<p>
Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
</p>
<p>
Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
</p>
</div>
<div class="module">
<h3 class="service">Fabric Backdrops</h3>
<div class="mini-gallery">
<div class="big-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
</div>
<p>
Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
</p>
<p>
Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
</p>
</div>
<div class="module">
<h3 class="service">Photobooths</h3>
<div class="mini-gallery">
<div class="big-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
</div>
<p>
Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
</p>
<p>
Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
</p>
</div>
<div class="module">
<h3 class="service">Videography</h3>
<div class="mini-gallery">
<div class="big-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
</div>
<p>
Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
</p>
<p>
Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
</p>
</div>
<div class="clear"></div>
</div>
</div>
<div id="tab2">
<h2 class="services">Entertainment</h2>
<p>sdlfkjgskjfgl</p>
</div>
<div id="tab3">
<h2 class="services">Entertainment</h2>
<p>s,djghlkfg</p>
</div>
<div id="tab4" class="tab">
<div id="services-container">
<div class="module">
<h3 class="service">Emcees</h3>
<div class="mini-gallery">
<div class="big-thumb"><img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=http://joltentertainment.com/wp-content/gallery/the-worlds-best-prom/em1_2782_1.jpg&h=172&w=278&zc=1" title="" width="278" height="172" /></div>
<div class="med-thumb"><img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=http://joltentertainment.com/wp-content/gallery/the-worlds-best-prom/em1_2443_0.jpg&h=82&w=188&zc=1" title="" width="188" height="82" /></div>
<div class="med-thumb"><img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=http://joltentertainment.com/wp-content/gallery/the-worlds-best-prom/em1_2787_1.jpg&h=82&w=188&zc=1" title="" width="188" height="82" /></div>
</div>
<p>
Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
</p>
</div>
<div class="module">
<h3 class="service">Percussionists</h3>
<div class="mini-gallery">
<div class="big-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
</div>
<p>
Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today. Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd!
</p>
</div>
<div class="module">
<h3 class="service">Elegant Event Furniture</h3>
<div class="mini-gallery">
<div class="big-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
</div>
<p>
Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
</p>
<p>
Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
</p>
</div>
<div class="module">
<h3 class="service">Fabric Backdrops</h3>
<div class="mini-gallery">
<div class="big-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
</div>
<p>
Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
</p>
<p>
Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
</p>
</div>
<div class="module">
<h3 class="service">Photobooths</h3>
<div class="mini-gallery">
<div class="big-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
</div>
<p>
Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
</p>
<p>
Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
</p>
</div>
<div class="module">
<h3 class="service">Videography</h3>
<div class="mini-gallery">
<div class="big-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
<div class="small-thumb"></div>
</div>
<p>
Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
</p>
<p>
Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
</p>
</div>
<div class="clear"></div>
</div>
</div><!-- END TAB A/V RENTALS -->
<script type="text/javascript">
$(function(){
$('#services-container').masonry({
itemSelector: '.module',
});
});
</script>
</div>
答案 0 :(得分：3)
我遇到了同样的问题。
听取标签上的点击事件，然后触发砌体效果。
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('.services-tabs li a').click(function() {
var container = $j('.mini-gallery');
container.imagesLoaded( function(){
container.masonry({
itemSelector : '.small-thumb'
});
});
})
});