如何使jQuery同位素流体？ [英] How to make fluid with jQuery Isotope?

问题描述

我试图使这个演示流体（改变img大小，当窗口调整大小）与jQuery Isotope插件，请按照 doc 。

我的代码有问题吗？
为什么window.resize似乎不工作？
，并使用 doc smartresize方法。

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

jsfiddle demo

I'm trying to make this demo fluid (change img size when window resize) with jQuery Isotope plugin, follow this doc.
Did I do something wrong with my code?
Why is the window.resize seems not working? and use doc smartresize method neither.

Any suggestion will be appreciated, Thanks

jsfiddle demo

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
            }
        });
    });
});​

推荐答案

UPDATED：

确保计算 cw3 变量的代码位于 window.resize（）调用。

Make sure the code for calculating the cw3 variable goes inside the window.resize() call.

$( 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/

这篇关于如何使jQuery同位素流体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！