沒有預定義寬度的響應式砌體布局

Question

我正在使用不同大小的圖像創建 2 列磚石布局。 圖像可以是任意大小，只要它們具有最大公約數（根據 Masonry 插件的要求）。

為了使布局具有響應性，我將砌體項目的寬度轉換為百分比（或者我可以使用 min-width 和 width 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

你在尋找這樣的東西嗎？

小提琴

所以，我們在這里所做的就是擺脫您的百分比計算（我真的不明白其必要性），並在.box類上設置min-width 。 像這樣：

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

我能夠重現您的問題。 這是它如何尋找那些好奇的人：

問題是你的float: left規則在 CSS 中，當 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 3

使用 imagesloaded.js 和 columnwidth 使用 css 設置，如下所示：

js小提琴

<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 的觀點，即不需要 Masonry 來實現這一點，看看這是否是您所追求的。

如果有什么不清楚或者你想要解釋什么，我很樂意詳細說明。

Answer 6

你不需要 JavaScript； 只需將.box的 css .box為：

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