Question

我在Bootstrap页面中使用jquery.isotope.js进行图片库过滤。

它在Chrome中完美地适用于过滤和响应式图像。但是在IE9和Firefox中，当窗口大小超过700px时，它可以很好地工作。虽然，当窗口大小小于700像素时，图像将无法响应。

我尝试使用装订线宽度编辑砌体布局，然后图像变得响应但过滤不起作用。我也尝试过最新的同位素，但没有。

这是代码

<!Doctype html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script type="text/javascript" src="jquery.isotope.js"></script>
</head>
<body>
    <div class="container">
        <div class="categories">
            <ul class="cat">
                <li class="pull-left">
                     <h4>PHOTOS</h4> 
                </li>
                <li class="pull-right">
                    <ol class="type">
                        <li><a href="#" data-filter="*" class="active"> ALL</a>
                        </li>
                        <li><a href="#" data-filter=".childhood">CHILDHOOD</a>
                        </li>
                        <li><a href="#" data-filter=".concerts">CONCERTS</a>
                        </li>
                    </ol>
                </li>
            </ul>
            <div class="clearfix"></div>
        </div>
        <div id="lightbox" class="row">
            <div class="col-md-4 childhood">
                <div class="portfolio-item">
                    <img src="img/photos/childhood/img5.jpg" class="img-responsive" alt="Childhood Images" />
                </div>
            </div>
            <div class="col-md-4 childhood">
                <div class="portfolio-item">
                    <img src="img/photos/childhood/img2.jpg" class="img-responsive" alt="Childhood Images" />
                </div>
            </div>
            <div class="col-md-4 childhood">
                <div class="portfolio-item">
                    <img src="img/photos/childhood/img3.jpg" class="img-responsive" alt="Childhood Images" />
                </div>
                <div>
                    <div class="col-md-4 concerts">
                        <div class="portfolio-item">
                            <img src="img/photos/concerts/img1.jpg" class="img-responsive" alt="Concert Images" />
                        </div>
                    </div>
                    <div class="col-md-4 concerts">
                        <div class="portfolio-item">
                            <img src="img/photos/concerts/img1.jpg" class="img-responsive" alt="Concert Images">
                        </div>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                $(window).load(function() {
                    var $container = $('#lightbox');
                    $container.isotope({
                        filter: '*',
                        animationOptions: {
                            duration: 750,
                            easing: 'linear',
                            queue: false
                        }
                    });
                    $('.cat a').click(function() {
                        $('.cat .active').removeClass('active');
                        $(this).addClass('active');
                        var selector = $(this).attr('data-filter');
                        $container.isotope({
                            filter: selector,
                            animationOptions: {
                                duration: 750,
                                easing: 'linear',
                                queue: false
                            }
                        });
                        return false;
                    });
                });
            </script>
</body>
</html>

Isotope.js图像无响应或未过滤

0 个答案: