7

我正在构建一个使用 David DeSandro 出色的 Isotope 插件的照片博客，但我目前在让插件在响应式/流体网格中按预期工作时遇到了一些困难。

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>
4

0 回答 0