Html jQuery砌石檐沟宽度和CSS边距权利问题

我需要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>

jQ

拨弄

更新：

$(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
            });
        });

    });

---

但是由于imagesloaded，我得到了一个未定义的错误。

您可以使用基于媒体查询设置各种水槽。像这样：

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中：

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

---

也考虑将代码打包在A中，然后只对这些进行射击。谢谢！！唯一的问题是，在调整$gotter的大小后，直到刷新之前$gotter都不会工作，但这并不是很烦人。再次感谢！！正如我所说，如果需要在调整大小后使用它，请将代码放在$window.resize中。这将导致每次窗口大小变化时都会触发代码。哦，已经触发了，谢谢！我也有truble当使用它与分页。当我使用imagesLoaded函数时，它会产生未定义的错误。你知道吗？小提琴似乎工作得很好。但我已经使用函数更新了代码，并确保在加载页面和用户调整大小时它将触发：使用此代码我再次得到未定义不是函数错误：

$(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
            });
        });

    });

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

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