javascript - 使用同位素javascript插件，我怎样才能摆脱差距？

Question

我正在尝试构建一个网格，该网格获取用户提交的所有照片，并将它们布置成一个整齐的网格，该网格将响应浏览器的宽高比/分辨率进行回流。

Isotope 看起来像是这方面的实际库。我已经根据我看过的他们的一个演示实现了所有内容，并且我使用了两种静态尺寸的图像(纵向分辨率为 346x533，横向分辨率为 520x347)。由于图片大小相同或高度是另一张的一半，因此这应该是一个不错的网格。问题是，它根本没有像我期望的那样渲染网格。有时我得到返回的布局，其中有很大的差距，

    HTML:
           <div class="ga">
            <div class="row">
                <div class="gridsa">
                    <div class="gridsa-sizer"></div>
                    <div class="gridsa-item">
                        <img src="img/tile1.jpg" class="img-port"/>
                    </div>
                    <div class="gridsa-item">
                        <img src="img/tile7.jpg" class="img-land"/>
                    </div>
                    <div class="gridsa-item tile3">
                        <img src="img/tile3.jpg" class="img-land"/>
                    </div>
                    <div class="gridsa-item">
                        <img src="img/tile4.jpg" class="img-land"/>
                    </div>
                    <div class="gridsa-item">
                        <img src="img/tile7.jpg" class="img-land"/>
                    </div>
                    <div class="gridsa-item">
                        <img src="img/tile6.jpg" class="img-land"/>
                    </div>
                    <div class="gridsa-item">
                        <img src="img/tile8.jpg" class="img-land"/>
                    </div>
                </div>
            </div>
        </div>

    CSS
    * { box-sizing: border-box; }




    /* ---- isotope ---- */
    .gridsa {
     background: #ffcc33;
     margin: 0px auto;
    }

    /* clear fix */
    .gridsa:after {
    content: '';
    display: block;
    clear: both;
    }
    /* ---- .grid-item ---- */
    .gridsa-sizer,
    .gridsa-item {
       width: 33.333%;
     }

    .gridsa-item {
    padding:0px;
    float:left;
    }
   .gridsa-item img {
    display: block;
    max-width: 100%;
    position:relative;


}
.gridsa-item h2{
     color:#ffffff;
     position: absolute;
     bottom: 5%;
     left: 33.3%;
     width: 100%;
 }

.gridsa-item.tile2 h2{
    color:#ffffff;
    position: absolute;
    bottom: 1px;
    left: 25%;
    width: 50%;
}

.gridsa-item.tile3 h2{
    color:#ffffff;
    position: absolute;
    bottom: 1px;
    left: 0;
    width: 80%;
}



.ga{
    background-color: #0c5449;
}

    JS
                 <script type="text/javascript">
                    $( document ).ready(function() {
                    // init Isotope
                        var $grid = $('.gridsa').isotope({
                            itemSelector: '.gridsa-item',
                            percentPosition: true,
                            masonry: {
                                columnWidth: '.gridsa-sizer'
                            }
                        });
                        // layout Isotope after each image loads
                        $grid.imagesLoaded().progress( function() {
                            $grid.isotope('layout');
                        });
                    });
                </script>

这是问题的 jsfiddle，但您需要最大化窗口并展开 html 部分才能看到问题。 https://jsfiddle.net/x6dhwh6k/2/

Answer 1

发生这种情况是因为您的图像尺寸小于可用空间

为了达到想要的效果，将 width: 100% 应用到您的 img

喜欢

.gridsa-item img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

查看更新的 fiddle https://jsfiddle.net/x6dhwh6k/3/

现在为了保持图像纵横比，您可能会在图像下看到很小的间隙，但我想这对同位素插件来说没问题，因为它应该是这样工作的