jQuery砖石gutterWidth和CSS融资融券

Question

我需要3列块布局，并使用jQuery砌体插件，但有问题的改变qutterWidth在不同的页面大小。

起初，我试图设置边距-右，但在这种情况下，砖石左定位是不工作的，应该是。

但是，当我给出gutterWidth的保证金时，我的反应能力就会有问题。我不是jQuery方面的专家，所以在调整浏览器大小时，请帮助更改gutterWidth，或者重新评论替代解决方案:(

密码在这里

<div class="masonry">

    <div class="item">
        <p class="item__par">texttexttexttext</p> <a href="" class="">texttexttexttexttexttext</a>

        <div class="item--inner">
            <p>itemitemitemitemitemitemitemitemitem</p>
        </div>
    </div>
    <div class="item">
        <p class="item__par">texttexttexttext</p> <a href="" class="">texttexttexttexttexttext</a>

        <div class="item--inner">
            <p>itemitemitemitemitemitemitemitemitem</p>
        </div>
    </div>
        <div class="item">
        <p class="item__par">texttexttexttext</p> <a href="" class="">texttexttexttexttexttext</a>

        <div class="item--inner">
            <p>itemitemitemitemitemitemitemitemitem</p>
        </div>
    </div>
        <div class="item">
        <p class="item__par">texttexttexttext</p> <a href="" class="">texttexttexttexttexttext</a>

        <div class="item--inner">
            <p>itemitemitemitemitemitemitemitemitem</p>
        </div>
    </div>
        <div class="item">
        <p class="item__par">texttexttexttext</p> <a href="" class="">texttexttexttexttexttext</a>

        <div class="item--inner">
            <p>itemitemitemitemitemitemitemitemitem</p>
        </div>
    </div>
</div>

CSS

.item {
    width: 273px;
    border:1px solid black;
    background: lightgray;
    display:inline-block;
    vertical-align:top;
    margin-bottom:50px;
    margin-right:50px
}

jQ

 $('.masonry').masonry({

      itemSelector: '.item',
      gutter: 68
  });

小提琴http://jsfiddle.net/frontDev111/0vhegec1/1/

更新：

$(window).resize(function() {
        var $gutter = 68;

        if (window.matchMedia("(max-width: 1200px)").matches) {
            $gutter = 30;
        }
        var $container = $('.masonry');
        $container.imagesLoaded( function() {
            $container.masonry({
                itemSelector: '.item',
                gutter: $gutter
            });
        });

    });

但是由于图像加载，我得到了未定义的错误。

Answer 1

您可以使用matchMedia根据媒体查询设置各种排水沟。如下所示：

var $gutter;

if (window.matchMedia("(min-width: 480px)").matches) {
    $gutter = 20;
} else if (window.matchMedia("(min-width: 768px)").matches) {
    $gutter = 40
} else { 
    // and so on
}

$('.masonry').masonry({
    itemSelector: '.item',
    gutter: $gutter
});

如果您需要类似CSS的工作，请将代码放在$(window).resize中。

$(window).resize(function() {
    // code
});

这将导致每次用户调整浏览器大小时都会触发代码。但是请不要在resize中放置非常大和复杂的脚本，这样会大大降低性能。

还可以考虑将代码包装在函数中，然后只触发这些代码。