Question

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

我只想在没有任何边框的情况下并排获取图像，但我尝试的所有内容都无法正常工作。

您可以在此处看到它：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标题中？

Answer 1

这可能不是一个解决方案，只是一个解决方法，但我已经玩了一段时间，看起来你可能只需要在容器初始化后调用Isotope layout。我不知道为什么会这样，这就是为什么这不是一个真正的解决方案。

这里是working fiddle。我更新了jQuery，消除了＆＃39; packery＆＃39;因为它在小提琴中不断给我一个错误：

$.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，使元素的宽度和高度正确，同位素功能正常。因为我的项目包装比砖石更好，因为包装正在填补所有空白，砖石只是寻找第一个可能的空隙而且没有填补空缺。

布局获得额外的边界

2 个答案: