需要帮助的网格

我上显示事件流体网格区域合作消除了与格垂直空间。我有媒体查询根据屏幕分辨率调整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

需要帮助的网格

回答

相关问题