布局获得额外的边框

Question

我正在尝试获取带同位素的全宽图像/照片库。我的问题是同位素在第一次加载时会在每个图像周围添加一些额外的像素，因此每个图像周围都有一个黑色边框。当我调整 window 大小时，边框消失，当我将其调整回全屏时，它也显示无边框。

我只是想并排显示没有任何边框的图像，但我尝试的所有方法都不起作用。

您可以在运行此处查看：link

html代码：

<div class="isotope">
    <div class="item"><img src="http://lorempixel.com/output/city-q-c-200-200-4.jpg" width="200" height="200" alt="stad"/></div>
    <div class="item med"><img src="http://lorempixel.com/output/animals-q-c-200-200-5.jpg" width="200" height="200" alt="beest"/></div>
    <div class="item"><img src="http://lorempixel.com/output/city-q-c-200-200-5.jpg" width="200" height="200" alt="stad"/></div>
    <div class="item large"><img src="http://lorempixel.com/output/animals-q-c-400-400-6.jpg" width="400" height="400" alt="beest"/></div>
    <div class="item"><img src="http://lorempixel.com/output/animals-q-c-200-200-4.jpg" width="200" height="200" alt="beest"/></div>
    <div class="item med"><img src="http://lorempixel.com/output/city-q-c-200-200-10.jpg" width="200" height="200" alt="stad"/></div>
    <div class="item large"><img src="http://lorempixel.com/output/animals-q-c-400-400-7.jpg" width="400" height="400" alt="beest"/></div>
    <div class="item med"><img src="http://lorempixel.com/output/city-q-c-200-200-9.jpg" width="200" height="200" alt="stad"/></div>
    <div class="item med"><img src="http://lorempixel.com/output/animals-q-c-200-200-2.jpg" width="200" height="200" alt="beest"/></div>
    <div class="item large"><img src="http://lorempixel.com/output/city-q-c-400-400-8.jpg" width="400" height="400" alt="stad"/></div>
    <div class="item"><img src="http://lorempixel.com/output/city-q-c-200-200-6.jpg" width="200" height="200" alt="stad"/></div>
    <div class="item"><img src="http://lorempixel.com/output/animals-q-c-200-200-3.jpg" width="200" height="200" alt="beest"/></div>
    <div class="item"><img src="http://lorempixel.com/output/city-q-c-200-200-7.jpg" width="200" height="200" alt="stad"/></div>
    <div class="item"><img src="http://lorempixel.com/output/animals-q-c-200-200-1.jpg" width="200" height="200" alt="beest"/></div>
    <div class="item"><img src="http://lorempixel.com/output/city-q-c-200-200-1.jpg" width="200" height="200" alt="stad"/></div>
</div>

javascript代码：

$.noConflict();
jQuery( document ).ready(function( $ ) {

    var $container = $('.isotope').imagesLoaded( function() {
        $container.isotope({
            itemSelector: '.item',
            layoutMode: 'packery'
        });
    });  
});

css代码：

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    background: #000;
    width: 100%;
    max-width: 100%;
    position: relative;
}

.isotope {
    width: 100%;
}

/* ---- .item ---- */

.grid-sizer {
    width: 10%;
}

.item {
    float: left;
    width: 10%;
    height: auto;
    background: #000;
    border: 0;
}

.item.med {
    width: 20%;
    height: auto;
}

.item.large { 
    width: 40%;
    height: auto; 
}

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

html 元素的宽度是正确的，但是当我在浏览器中检查 css 时，Isotope 在元素的左侧和顶部位置添加了一些额外的像素。希望有人能帮助我吗？

编辑：

看起来它在手机和平板电脑上运行良好。可能跟

有关

<meta name="viewport" content="width=device-width, initial-scale=1">

在 html header?

Answer 1

与其说这是一种变通方法，不如说是一种解决方案，但我已经尝试了一段时间，看起来您可能只需要在容器初始化后调用 Isotope layout。我不知道为什么会这样，这就是为什么这不是真正的解决方案。

这是 working fiddle。我将 jQuery 更新为这个，消除了 'packery' 因为它一直在 fiddle 中给我一个错误：

$.noConflict();
jQuery( document ).ready(function( $ ) {

var $container = $('.isotope')
    $container.isotope({
        itemSelector: '.item',
        // layoutMode: 'packery'
    });

$container.isotope('layout');

});`

如果要对列使用百分比，还需要考虑的一件事是使用 Masonry 布局和 setting explicit values for your column widths。

Answer 2

感谢 Pixelsmith 为我指明了正确的方向。我需要稍微更改一下您的 jQuery，但调用同位素布局可以解决大部分问题。我的 jquery 现在看起来像这样：

$.noConflict();
jQuery( document ).ready(function( $ ) {

    $('.isotope').imagesLoaded( function() {
        var $container = $('.isotope');
        $container.isotope({
            layoutMode: 'packery',
            packery: {
                columnWidth: '.grid-sizer'
            },
            itemSelector: '.item'
        });
        $container.isotope('layout');
    });
});

调用imagesLoaded，所以元素的宽度和高度是正确的，同位素功能良好。对于我的项目，Packery 比 masonry 更好，因为 packery 正在填补所有空白，masonry 只是在寻找第一个可能的空白，并没有填补空白。

布局获得额外的边框

Layouts get additional border

jquery

html

jquery-isotope