Question

我正在研究显示事件的流体网格部分。我有媒体查询来根据屏幕分辨率调整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

感谢您的帮助！

Answer 1

如果您计划仅支持现代浏览器，则可以使用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或Vanilla Masonry Library，则为Masonry jQuery plugin。两者都能满足您的需求。

Answer 2

这是我找到并且效果很好的解决方案。

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();
 });

需要帮助删除网格中div的垂直空间

2 个答案: