jquery - 如何使用 jQuery Isotope 制作流体？

Question

我正在尝试使用 jQuery Isotope 插件使这个演示流畅（在调整窗口大小时更改 img 大小），请遵循此文档。
我的代码做错了吗？
为什么 window.resize 似乎不起作用？并且不使用doc smartresize 方法。

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

jsfiddle 演示

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()调用中包含基数参数

见http://jsfiddle.net/hongaar/9zJRh/3/