无预定义宽度的响应式砌体布局

Question

我正在使用不同尺寸的图像创建 2 列砖石布局。图像可以是任何大小，只要它们具有最大公约数（根据 Masonry 插件的要求）。

为了使布局响应，我将砖石项目的宽度转换为百分比（或者我可以使用最小宽度和宽度 100%）。

更新：我注意到许多回答的人都将两栏都设为 50% 作为解决方案。这有效，但不是目标。图像必须保留其原始图像大小。它们可以缩小但保持相同的比例。

$(function () {    
    var container = $('#container');

    // Convert .box width from pixels to percent
    $('.box').find('img').each(function () {
        var percent = ($(this).width()) / container.width() * 100 //convert to percent;
        $(this).closest('.box').css('max-width', percent + '%');
    });

    // Trigger masonry
    container.masonry({
        itemSelector: '.box',
        columnWidth: 1 //widths dividable by 1
    });
});

jsfiffle：http://jsfiddle.net/AMLqg/278/

这似乎有效。当您调整窗口大小时，这些项目是流动的。但是，如果您在小窗口大小（小于 2 列宽度）中加载脚本，则项目会崩溃。即使窗口较小，如何保持砖石项目对窗口负载的响应？

更新：这里有更多信息以便更好地理解。无论窗口大小如何，我都试图保留 2 个响应列。列不能具有相同的宽度，因为图像具有不同的宽度。因此我使用

columnWidth: 1

因为所有宽度都可以被 1 整除。

请参阅下面的图片作为示例。

问题：当您在小窗口中打开页面时，元素会折叠。当您将窗口大小调整为更大时，元素将保持折叠状态，直到窗口宽度大于两个元素的宽度。

目标：我试图在加载时将元素保留在 2 个响应列中，如下图所示。目前，如果加载时窗口很大并且您将其大小调整为较小，它们仍然保持响应，但反之亦然，当加载时窗口很小并且您将其放大时。

Answer 1

你可以尝试在周围的盒子上使用overflow:hidden。

Answer 2

使用 imagesloaded.js 并使用 css 设置列宽度，如下所示：

jsFiddle

<div id="container">
<div class="grid-sizer"></div>
<div class="box">
    <img src="http://images.huffingtonpost.com/2007-11-01-ice.jpg" />
</div>
<div class="box">
    <img src="http://www.wwalls.ru/mini/201211/57608.jpg" />
</div>
<div class="box">
    <img src="http://artistsandwriters.com/site/wp-content/uploads/2014/09/IMG_7303LR-390x150-1412284267.jpg" />
</div>
</div>

脚本

$(document).ready(function () {
 var container = $('#container');

 $('.box').find('img').each(function () {
     var percent = $(this).width() / container.width() * 50;
     $(this).closest('.box').css('max-width', percent + '%');
 });

 // Trigger masonry
 container.imagesLoaded(function () {
     container.masonry({
         itemSelector: '.box',
         columnWidth: '.grid-sizer'
     });
 });
 });

CSS

#container {
max-width:580px;
}
.box {
float: left;
margin-bottom: 5px;
}
.box img {
 width: 100%;
}
.grid-sizer {
 width: 50%;
 }

Answer 3

您在寻找这样的东西吗？

小提琴

因此，我们在这里所做的就是摆脱百分比计算（我真的不明白其必要性），并在

min-width

类上设置

.box

。 就像这样：

.box {
    float: left;
    min-width: 100px;
}

我能够重现您的问题。 对于那些好奇的人来说，这就是它的样子：

问题是CSS中的

float: left

规则，当Masonry在添加图像后进行定位计算时，该规则会折叠盒子。 如果您真的需要保留那个笨重的百分比计算，您可以做一个简单的清除修复来保留它，如下所示：

.container:after {
   content: '';
   display: table;
   clear: both;
}

希望有帮助！

编辑 – 根据您的评论：

好吧，如果您总是希望有两列，那么这是一个更简单的更改：

摆脱这个Javascript

// Convert .box width from pixels to percent
$('.box').find('img').each(function () {
    var percent = $(this).width() / container.width() * 100;
    $(this).closest('.box').css('max-width', percent + '%');
});

添加此CSS

.box {
   max-width: 50%;
}

我认为相当简单。

这是一个小提琴，只是为了咯咯笑

Answer 4

编辑

检查这个http://jsfiddle.net/gk3t009j/2/

CSS

#wrapper
{
    background-color: red;
    margin: 0 auto; max-width:580px;
}

#container,
{
       overflow: hidden; 
       width: 100%;
}
.box
{       
    max-width: 290px!important; width: 50%;     
}

.box img{width: 100%;}

JS

$( window ).load( function()
{
    var wc=$( '#container').width();
    wc=parseInt(wc);
    if( wc % 2) 
    {
        var wb=$('.box').width();
        wb--;
        $('.box').width(wb)
    } 


    $( '#container').masonry(
    {
        itemSelector: '.box',
        columnWidth: function( containerWidth ) {
            return parseInt(containerWidth / 2);
          }

    });
});

HTML

<div id="wrapper">
    <div id="container">
        <div class="box">
            <img src="http://images.huffingtonpost.com/2007-11-01-ice.jpg" />
        </div>



        <div class="box">
                <img src="http://www.wwalls.ru/mini/201211/57608.jpg" />
            </div>
            <div class="box">
                <img src="http://artistsandwriters.com/site/wp-content/uploads/2014/09/IMG_7303LR-390x150-1412284267.jpg" />
            </div>
    </div>
</div>

Answer 5

我删除了 JS 代码和一些 HTML 标记并更新了样式：

#container {
    width: 100%;
}
img {
    display: inline;
    vertical-align: top;
    float: left;
    min-width: 50%;
    width: 50%;
}

http://jsfiddle.net/org6nsr8/8/ 我同意 Josh Burgess 的观点，即不需要 Masonry 来完成此任务，请看一下，看看这是否是您想要的。

如果有不清楚的地方或者您需要任何解释，我很乐意详细说明。

Answer 6

您不需要 JavaScript；只需将

.box

的 css 更改为：

.box {
    float: left;
    max-width: 50%;
}

Answer 7

我不确定这是否是您所需要的。如果我正确理解问题可能是您需要使用 max-width 而不是 width。

这是小提琴示例： http://jsfiddle.net/AMLqg/304/

我的JS代码：

        $(function () {

            var container = $('#container');
            var maxWidth = container.css("maxWidth");
            maxWidth = parseInt(maxWidth.substring(0,maxWidth.indexOf("px")));
            // Convert .box width from pixels to percent
            $('.box').find('img').each(function () {
                var percent = ($(this).width()) / maxWidth * 100;
                console.log(percent);
                $(this).closest('.box').css('max-width', percent + '%');
            });

            // Trigger masonry
            container.masonry({
                itemSelector: '.box',
                columnWidth: 1 //widths dividable by 1
            });
        });

Answer 8

在尝试了几个库来制作砖石布局后，我更喜欢salvattor.js

非常容易使用。您可以配置 css 的列的大小。

@media screen and (max-width: 480px){
    #grid[data-columns]::before {
        content: '1 .column.size-1of1';
    }
}

Answer 9

据我所知，您希望在所有屏幕尺寸上保留布局 2 列，其中图像的宽高比，

检查

http://jsfiddle.net/tasaeed/k40cgfye/

CSS

#container {
  max-width: 580px;
}

.box {
  float: left;
  width:50%;
}

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

脚本

$(function () {

    var container = $('#container');

    // Trigger masonry
    container.masonry({
        itemSelector: '.box',
    });
});