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

az31mfrm 于 2022-11-27 发布在其他

关注(0)|答案(9)|浏览(187)

我正在创建一个2列砖石布局使用不同大小的图像。图像可以是任何大小，只要他们有最大的公约数（如砖石插件所要求的）。
为了使布局响应，我将砖石项目的宽度转换为百分比（或者我可以使用最小宽度和宽度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
    });
});

文件名：http://jsfiddle.net/AMLqg/278/
这看起来是可行的。当你调整窗口大小时，项目是流动的。但是如果你在一个小的窗口大小（小于2列宽）中加载脚本，项目会崩溃。我如何保持砖石项目在窗口加载时的响应，即使窗口很小？

**更新：**这里有更多的信息可以帮助你更好的理解。不管窗口大小如何，我都试图保持2个响应列。列不能有相等的宽度，因为图像有不同的宽度。因此我使用columnWidth: 1，因为所有的宽度都可以被1整除。

请参见下面的图片查看示例。

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

**目标：**我正在尝试在加载时保持2个响应列中的元素，如下图所示。目前，如果加载时窗口很大，您将其调整为更小，它们仍保持响应，但如果加载时窗口很小，您将其调整为更大，它们仍保持响应。

css

来源：https://stackoverflow.com/questions/26866708/responsive-masonry-layout-without-predefined-widths

9条答案

按热度按时间

b1zrtrql1#

您可以尝试溢出：隐藏在周围的框。

赞(0）回复(0）举报 2022-11-27

4ioopgfo2#

使用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%;
 }

赞(0）回复(0）举报 2022-11-27

u1ehiz5o3#

你在找这样的东西吗？

Fiddle的名字

因此，我们在这里所做的就是去掉百分比计算（我真的不明白有这个必要），并在.box类上设置一个min-width，就像这样：

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

我可以重现你的问题。这是它看起来为那些好奇：

问题出在CSS中的float: left规则，当Masonry在添加图像后进行定位计算时，它会折叠方框。如果你 * 真的 * 需要保留这个笨拙的百分比计算，你可以做一个简单的clear-fix来保留这个规则，如下所示：

.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的名字

赞(0）回复(0）举报 2022-11-27

xxb16uws4#

编辑
检查此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%;}

$( 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>

赞(0）回复(0）举报 2022-11-27

ttvkxqim5#

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

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

http://jsfiddle.net/org6nsr8/8/我同意乔什伯吉斯的说法，砖石是不需要完成这一点，看看这是否是你所追求的。
如果有什么不清楚的地方或者你想解释的话我很乐意解释。

赞(0）回复(0）举报 2022-11-27

oo7oh9g96#

您不需要JavaScript;只需将.box的css更改为：

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

赞(0）回复(0）举报 2022-11-27

ep6jt1vc7#

我不确定这是否是你所需要的。如果我理解正确的话，问题可能是你需要使用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
            });
        });

赞(0）回复(0）举报 2022-11-27

dgenwo3n8#

在尝试了几个图书馆作出砖石布局后，我更喜欢salvattor.js
非常容易使用。列的大小可以配置css。

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

赞(0）回复(0）举报 2022-11-27

zynd9foi9#

据我所知，您希望在所有屏幕尺寸上保持“布局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',
    });
});

赞(0）回复(0）举报 2022-11-27

我来回答

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

9条答案

Fiddle的名字

编辑-根据您的意见：

Here's a fiddle, just for giggles的名字

相关问题

热门标签

最新问答