Question

我正在构建一个使用David DeSandro的精彩Isotope插件的photoblog，但我很难让插件在响应/流畅网格中按预期工作。

www.lewismalpas.co.uk/tumblr（演示）

每个图像都包含在div（.item）中，其显示宽度为25％，因为图像很灵活，理论上这应该允许四个图像内联显示，但此刻只显示两个图像，我似乎无法弄清楚这个问题。

<script type="text/javascript">
$(document).ready(function(){

//scroll to top of page
$("a.top").click(function () {
    $("body,html").animate({scrollTop: 0}, 800);
    return false;
});

//Isotope settings
var $container = $('.images')
$container.imagesLoaded( function(){
    $container.isotope({
        resizable: false, // disable normal resizing
        masonry: { columnWidth: $container.width() / 4 }
    });
    // update columnWidth on window resize
    $(window).smartresize(function(){
        $container.isotope({
            masonry: { columnWidth: $container.width() / 4 }
        });
    });
});

//layout & search options
$(".header #layout").hide();
$(".header a.layout").click(function() {
    $(".header #layout").fadeIn();

    $(".header a.fullscreen").click(function() {
        $("a.layout-option").removeClass("selected");
        $(this).addClass("selected");
        $("#container").animate({width:"99%"}, function() {
            $(".images").isotope('reLayout');
        });
    });
    $(".header a.grid").click(function() {
        $("a.layout-option").removeClass("selected");
        $(this).addClass("selected");
        $("#container").animate({width:"80%"}, 800);
        $('#images').isotope({itemSelector:'.item',layoutMode:'masonry'});
    });
    $(".header a.linear").click(function() {
        $("a.layout-option").removeClass("selected");
        $(this).addClass("selected");
        $("#container").animate({width:"80%"}, 800);
        $('#images').isotope({itemSelector:'.item',layoutMode:'straightDown'});
    });
});

$(".header #search").hide();
$(".header a.search").click(function() {
    $(".header #search").fadeIn();
});

}); //end doc ready
</script>

jQuery Isotope - 不在响应/流体网格中工作

0 个答案: