Question

我有一个砌体网格设置，其中包装布局非常流畅。但是，在调整浏览器大小时，网格会重新排列。我想保持网格完全静止。

JSFiddle：http://jsfiddle.net/5gL8bz3e/1/

这是我的CSS：

body {
    overflow-y: scroll;
    }

.grid-item,
.grid-sizer {
    width: 5.3125vw;
    }

.gutter-sizer {
    width: 1vw;
    }

.grid-item {
    float: left;
    height: auto;
    background: #fff;
    border: 0px solid #fff;
    margin-bottom: 0vw;
    background: none;
    }

.grid-item img {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    display: block;
    }

.grid-item--width2, .grid-item--width2b { width: 11.625vw; }
.grid-item--width4 { width: 24.25vw; }
.grid-item--width6 { width: 36.875vw; }

.grid {
    background: lightyellow;
    width: 75vw;
    position: relative;
    left: 12.625vw;
    top: 12.625vw;
    margin-top: 0;
    min-height: 1000px;
    }

.stamp {
    width: 11.625%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    background: lightpink;
}

.stamp1 {
    left: 0;  
    }

.stamp2 {
    right: 0;
    }

HTML：

<div class="grid">
    <div class="gutter-sizer"></div>
    <div class="grid-sizer"></div>

    <div class="grid-item grid-item--width6">
        <img src="http://placehold.it/1180x760"/>
    </div>

    <div class="grid-item grid-item--width4">
        <img src="http://placehold.it/776x496"/>
    </div>

    <div class="grid-item grid-item--width2b">
        <img src="http://placehold.it/372x496"/>
    </div>

    <div class="grid-item grid-item--width2">
        <img src="http://placehold.it/372x232"/>
    </div>

    <div class="grid-item grid-item--width1">
        <img src="http://placehold.it/170x232"/>
    </div>

    <div class="grid-item grid-item--width1">
        <img src="http://placehold.it/170x232"/>
    </div>

        <div class="grid-item grid-item--width6">
        <img src="http://placehold.it/1180x760"/>
    </div>

    <div class="grid-item grid-item--width4">
        <img src="http://placehold.it/776x496"/>
    </div>

    <div class="grid-item grid-item--width2b">
        <img src="http://placehold.it/372x496"/>
    </div>

    <div class="grid-item grid-item--width2">
        <img src="http://placehold.it/372x232"/>
    </div>

    <div class="grid-item grid-item--width1">
        <img src="http://placehold.it/170x232"/>
    </div>

    <div class="grid-item grid-item--width1">
        <img src="http://placehold.it/170x232"/>
    </div>

       <div class="grid-item grid-item--width6">
        <img src="http://placehold.it/1180x760"/>
    </div>

    <div class="grid-item grid-item--width4">
        <img src="http://placehold.it/776x496"/>
    </div>

    <div class="grid-item grid-item--width2b">
        <img src="http://placehold.it/372x496"/>
    </div>

    <div class="grid-item grid-item--width2">
        <img src="http://placehold.it/372x232"/>
    </div>

    <div class="grid-item grid-item--width1">
        <img src="http://placehold.it/170x232"/>
    </div>

    <div class="grid-item grid-item--width1">
        <img src="http://placehold.it/170x232"/>
    </div>

        <div class="grid-item grid-item--width6">
        <img src="http://placehold.it/1180x760"/>
    </div>

    <div class="grid-item grid-item--width4">
        <img src="http://placehold.it/776x496"/>
    </div>

    <div class="grid-item grid-item--width2b">
        <img src="http://placehold.it/372x496"/>
    </div>

    <div class="grid-item grid-item--width2">
        <img src="http://placehold.it/372x232"/>
    </div>

    <div class="grid-item grid-item--width1">
        <img src="http://placehold.it/170x232"/>
    </div>

    <div class="grid-item grid-item--width1">
        <img src="http://placehold.it/170x232"/>
    </div>

</div>

Answer 1

我认为选项isResizeBound就是这样做的。默认情况下为true，但您可以另外指定。

var msnry = new Masonry('.grid', {
   columnWidth: 200,
   itemSelector: '.grid-item',
   isResizeBound: false
});

有关详细信息，请参阅doc。

防止砌体网格重新排列

1 个答案: