Question

我需要3列块布局，并使用jQuery masonry插件，但是在页面中更改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内放置非常大而复杂的脚本，这会大大降低性能。

另外，请考虑将代码包装在functions中，然后仅触发这些代码。

jQuery Masonry gutterWidth和CSS margin-right问题

1 个答案: