html - jQuery Masonry gutterWidth 和 CSS margin-right 问题

Question

我需要 3 列 block 布局，并使用 jQuery masonry 插件，但在更改页面不同大小的 qutterWidth 时遇到问题。

起初我尝试设置 margin-right，但在这种情况下，masonry left 定位无法正常工作。

但是当我用 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
  });

fiddle 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 中，这会大大降低性能。

还可以考虑将您的代码包装在 functions 中然后只触发这些。