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

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

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

Answer 2

你在找这样的东西吗？

Fiddle

所以，我们在这里所做的就是摆脱你的百分比计算（我真的不明白必要性），并在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%;
}

我认为相当直截了当。

Here's a fiddle, just for giggles

Answer 3

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

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 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的观点，认为不需要砌体来实现这一目标，看一下，看看这是否是你所追求的。

我很乐意详细说明某些事情是否不清楚，或者您是否需要解释任何事情。

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