Question

我正在尝试使用jQuery Isotope插件制作此演示流程（在窗口调整大小时更改img大小），请遵循此doc。
我的代码有问题吗？为什么window.resize似乎不起作用？并且也不使用doc smartresize方法。

任何建议将不胜感激，谢谢

HTML CSS

<div id="container">
    <div class="item"><img src="http://placekitten.com/300/350" /></div>
    <div class="item"><img src="http://placekitten.com/300/300" /></div>
    <div class="item"><img src="http://placekitten.com/300/450" /></div>
    <div class="item"><img src="http://placekitten.com/300/200" /></div>
    <div class="item"><img src="http://placekitten.com/300/250" /></div>
    <div class="item"><img src="http://placekitten.com/300/400" /></div>
    <div class="item"><img src="http://placekitten.com/300/200" /></div>
    <div class="item"><img src="http://placekitten.com/300/350" /></div>
    <div class="item"><img src="http://placekitten.com/300/300" /></div>
    <div class="item"><img src="http://placekitten.com/300/450" /></div>
    <div class="item"><img src="http://placekitten.com/300/200" /></div>
    <div class="item"><img src="http://placekitten.com/300/250" /></div>
    <div class="item"><img src="http://placekitten.com/300/400" /></div>
    <div class="item"><img src="http://placekitten.com/300/200" /></div>
</div>

#container {
    background: black;
}
.item {
    width: 33px;
    float: left;
}
.item img {
    display: block;
    width: 33px;
}

的jQuery

$( function() {

    ww=$(window).width();
    $('#container').css({'width':ww});
    cw=$('#container').width();
    cw3=cw/3;
    $('.item').css({'width':cw3});
    $('.item img').css({'width':cw3});

    $('#container').imagesLoaded(function(){
        $('#container').isotope({
            masonry:{
            columnWidth: cw3
        }
    });
});

  // $(window).smartresize(function(){
  //     $('#container').isotope({
  //         masonry:{
  //             columnWidth: cw3
  //         }
  //     });
  // });
    $(window).bind("resize", function() {
        $('#container').isotope({
            masonry:{
                columnWidth: cw3
            }
        });
    });
});

Answer 1

<强>更新：

确保计算cw3变量的代码位于window.resize()调用内。

$( function() {

    $(window).bind("resize", function() {

        ww=$(window).width();
        $('#container').css({'width':ww});
        cw=$('#container').width();
        cw3=parseInt(cw/3, 10);
        $('.item').css({'width':cw3});
        $('.item img').css({'width':cw3});

        $('#container').isotope({
            masonry: {
                columnWidth: cw3
            }
        });

    }).resize();

});

有趣的事实：始终在parseInt()调用

中包含radix参数

请参阅http://jsfiddle.net/hongaar/9zJRh/3/

如何使用jQuery Isotope制作流体？

1 个答案: