Question

我在两个不同页面的新网站上使用Masonry。这也是一个Bootstrap站点，所以我正在寻找响应的内容。在当前的配置下，我可以进行无响应的Masonry动画排序，或者我可以在没有动画排序的情况下进行响应，但我不能将两者结合在一起。

没有动画的响应：http://rouviere.net/photo/portfolio/

所有这一切的关键是id =“our-work”，它与这个jQuery相关联。

$(window).load(function(){
    $('#our-work').masonry({
        singleMode: true,
        itemSelector: '.project:not(.hidden)',
        isFitWidth: false,
        isAnimated: true
    });
});

$(document).ready(function() {
    $('ul#filters a').click(function() {
        $(this).css('outline','none');
        $('ul#filters .current').removeClass('current');
        $(this).parent().addClass('current');

        var filterVal = $(this).text().replace(' ','-');

        if(filterVal == 'All-Work') {$('.hidden').fadeIn('slow').removeClass('hidden');} else {

            $('.project').each(function() {
                if(!$(this).hasClass(filterVal)) {$(this).fadeOut('normal').addClass('hidden');} else {$(this).fadeIn('slow').removeClass('hidden');}
            });
        }
        $('#our-work').masonry('reload');
        return false;
    });
    $('a:contains("-")').html(function () {
    return $(this).text().replace(/-/g, '<span class="hideme">-</span>');
});

$("a.project_link").hover(function () {
    $(this).find("img").hide();
    $(this).next(".info_overlay").show();
        });

$(".info_overlay").mouseleave(function(){
         $(this).hide();
    $(this).prev().find("img").show();
  });
});

以下是包含动画排序的页面中的代码：

<div  id="our-work" class="row">   
<div class="container"> 

<div class="project col-xs-12 col-sm-3 Our Work Photography ">
<a class="project_link" href="/our-work/project/holi-festival">
<img src="http://www.rouviere.net/resources/photos/Angel_colors.jpg" alt="Holi Festival" >

<div class="info_overlay" style="display:none;">
<h3>Holi Festival</h3>
<p>Holi Festival - A Good time was had by all</p>
<p class="view"><a href="/our-work/project/holi-festival">VIEW</a></p>
</div><!-- end info_overlay -->
</a>
</div><!-- end project -->

<div class="project col-xs-12 col-sm-3 Our Work Media-Integration Websites Content-Management Branding-and-Logo Photography Video Print Topics Religion ">
<a class="project_link" href="/our-work/project/christmas-nativity">
<img src="http://www.rouviere.net/resources/photos/Apex_Navitity_2010-069.jpg" alt="Christmas Nativity" >

<div class="info_overlay" style="display:none;">
<h3>Christmas Nativity</h3>
<p>Christmas lights at Temple Square in Salt Lake City, Utah.</p>
<p class="view"><a href="/our-work/project/christmas-nativity">VIEW</a></p>
</div><!-- end info_overlay -->
</a>
</div><!-- end project -->

<div class="project col-xs-12 col-sm-3 Our Work Media-Integration Websites Mobile-sites Content-Management Branding-and-Logo Photography Video Print Topics Clean Energy Illustration & design ">
<a class="project_link" href="/our-work/project/reap-renewable-energy-and-preservation">
<img src="http://www.rouviere.net/resources/photos/reap-home-page-copy.jpg" alt="REAP" >

<div class="info_overlay" style="display:none;">
<h3>REAP</h3>
<p>We built REAP a completely responsive site.</p>
<p class="view"><a href="/our-work/project/reap-renewable-energy-and-preservation">VIEW</a></p>
</div><!-- end info_overlay -->
</a>
</div><!-- end project -->

</div><!-- container -->
</div><!-- row -->

如果删除id =“our-work”，它会杀死动画，但内容会变得敏感。我正在寻找一个双赢的地方，内容具有响应性和动画效果，并且可以使用一些见解来解决问题。

我如何使用＆＃39; Masonry＆＃39;并保持Bootstrap页面内容的响应？

0 个答案: