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

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

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