需要幫助的網格

我上顯示事件流體網格區域合作消除了與格垂直空間。我有媒體查詢根據屏幕分辨率調整div的大小。如果所有的div都是相同的高度，它看起來很棒。但是，如果它們的高度不同，它們之間的垂直空間看起來很糟糕。我想知道是否有辦法解決它。不確定可以單獨使用CSS來完成。可能需要一些JavaScript。我附上了兩張圖片：它看起來像一張，還有一張是我想要的樣子。 HTML代碼如下。需要幫助的網格

<style> 
body { 
    background-color:#dedede; 
    margin:0; 
    font-family:Verdana, Geneva, sans-serif; 
    font-size:11px; 
} 
#pagewrap { 
    width: 100%; 
    margin: 10px auto; 
} 
.box { 
    box-sizing:border-box; 
    padding:10px; 
    margin:6px; 
    max-width:220px; 
    border:solid 1px #ccc; 
    background-color:#fff; 
    float:left; 
} 
@media screen and (max-width: 1200px) { 
    .box { 
     width:19%; 
     margin:.5%; 
    } 
} 
@media screen and (max-width: 980px) { 
    .box { 
     width:23.75%; 
     margin:.5% 
    } 
} 
@media screen and (max-width: 650px) { 
    .box { 
     width:31%; 
     margin:1%; 
    } 
} 
@media screen and (max-width: 565px) { 
    .box { 
     width:46%; 
     margin:2%; 
    } 
} 
@media screen and (max-width: 360px) { 
    .box { 
     width:90%; 
    } 
} 
</style> 
</head> 
<body> 
<div id="pagewrap"> 
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div> 
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div> 
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultricesneque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div> 
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div> 
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div> 
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div> 
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div> 
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdumneque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum quam, a pharetra est pulvinar ac.</div> 
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div> 
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div> 
</div> 
</body>

什麼它目前看起來像： what it looks like http://asingularcreation.com/Images/test/bad.jpg

我希望它看起來像： what I want it to look like http://asingularcreation.com/Images/test/good.jpg

感謝您的幫助！

來源

2013-04-26 singular

如果您計劃只支持現代瀏覽器，你可以使用CSS3 multi-column layouts。

DEMO：http://jsfiddle.net/Vr4Dh/

#pagewrap { 
    width: 100%; 
    margin: 10px auto; 
    -webkit-column-width: 220px; 
    -moz-column-width: 220px; 
    column-width: 220px; 
} 
.box { 
    box-sizing:border-box; 
    padding:10px; 
    margin:6px; 
    max-width:220px; 
    border:solid 1px #ccc; 
    background-color:#fff; 
    display: inline-block; 
    vertical-align: top; 
}

然而，對於一個跨瀏覽器的解決方案，如果你不使用jQuery或Masonry jQuery plugin還有的Vanilla Masonry Library。兩者都做你正在尋找的東西。

來源

2013-04-26 13:15:38 plalx

我愛jQuery的。非常感謝您的回覆。我會試一試，讓它知道它是否有效。 – singular 2013-04-26 13:24:35

我試過砌體jquery插件，它工作正常，但不是很好。如果它們中的div是標準寬度並且您不擔心根據屏幕分辨率更改div的寬度，那很好。但是我沒有像我需要的那樣工作得很好。再次感謝您的幫助。我會繼續挖掘。 – singular 2013-04-26 14:48:22

@singular，我相信你會在調整大小的情況下，重新申請的插件。這裏有http://stackoverflow.com/questions/6542846/masonry-plugin-resizing-div-wont-cause-reshuffle再看看 – plalx 2013-04-26 14:55:51

這是我發現的偉大工程的解決方案。

jQuery(document).ready(function($) { 
    var CollManag = (function() { 
     var $ctCollContainer = $('#pagewrap'), 
     collCnt = 1, 
     init = function() { 
      changeColCnt(); 
      initEvents(); 
      initPlugins(); 
     }, 
     changeColCnt = function() { 
      var w_w = $(window).width(); 
      if(w_w <= 360) n = 1; 
      else if(w_w <= 565) n = 2; 
      else if(w_w <= 720) n = 3; 
      else if(w_w <= 980) n = 4; 
      else n = 5; 
     }, 
     initEvents = function() { 
      $(window).on('smartresize.CollManag', function(event) { 
       changeColCnt(); 
      }); 
     }, 
     initPlugins = function() { 
      $ctCollContainer.imagesLoaded(function(){ 
       $ctCollContainer.masonry({ 
        itemSelector : '.box', 
        columnWidth : function(containerWidth) { 
         return containerWidth/n; 
        }, 
        isAnimated : true, 
        animationOptions: { 
         duration: 400 
        } 
       }); 
      }); 
      $ctCollContainer.colladjust(); 
      $ctCollContainer.find('div.box-multi').collslider(); 
     }; 
     return { init: init }; 
    })(); 
    CollManag.init(); 
});

來源

2013-04-26 16:36:39 singular

需要幫助的網格

回答

相關問題