没有预定义宽度的响应式砌体布局小提琴这是一个小提琴，只是为了咯咯笑

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
    });
});

jsfiddle：qazxsw poi

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

更新：这是更多信息，以便更好地理解。无论窗口大小如何，我都试图保留2个响应列。列不能具有相等的宽度，因为图像具有不同的宽度。出于这个原因，我使用http://jsfiddle.net/AMLqg/278/，因为所有宽度都可以分为1。

请参阅下面的图片以获取示例。

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

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

Answer 1

您可以尝试溢出：隐藏在周围的盒子上。

Answer 2

使用imageloaded.js和使用css设置的columnwidth如下：

columnWidth: 1

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>

CSS

$(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'
     });
 });
 });

Answer 3

你在找这样的东西吗？

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

所以，我们在这里所做的就是摆脱你的百分比计算（其中我真的不明白必要性），并在Fiddle类上设置min-width。像这样：

.box

我能够重现你的问题。这就是它寻找那些好奇的方式：

问题是你的CSS中的

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

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

float: left

希望有所帮助！

Edit – Based on your comments:

好的，如果你总是希望有两列，那就更简单了：

摆脱这个Javascript

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

添加此CSS

// 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 + '%');
});

我认为相当简单。

.box {
   max-width: 50%;
}

Answer 4

编辑

检查这个Here's a fiddle, just for giggles

CSS

http://jsfiddle.net/gk3t009j/2/

JS

#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%;}

HTML

$( 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);
          }

    });
});

Answer 5

我删除了JS代码和一些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>

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

我同意Josh Burgess的说法，不需要砌体就可以完成这个工作，看一下，看看这是不是你想要的。

如果有什么不清楚或你想要解释什么，我会很高兴详细说明。

Answer 6

你不需要JavaScript;只需将http://jsfiddle.net/org6nsr8/8/的css更改为：

.box

Answer 7

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

这是一个例子小提琴：

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

我的JS代码：

http://jsfiddle.net/AMLqg/304/

Answer 8

在尝试了几个库来制作砌体布局后，我更喜欢

        $(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
            });
        });

非常好用。您可以配置css的列的大小。

salvattor.js

Answer 9

我的理解你想要在所有屏幕尺寸上保持布局2列与纵横比的图像，

校验

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

CSS

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

脚本

#container {
  max-width: 580px;
}

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

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