0

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

它目前的样子：（ 来源：asingularcreation.com）它看起来像什么

我希望它看起来像什么：（ 来源：asingularcreation.com）我希望它看起来像什么

谢谢你的帮助！

4

2 回答 2

1

如果你打算只支持现代浏览器，你可以使用CSS3 多列布局。

演示：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。两者都可以满足您的需求。

于 2013-04-26T13:15:38.880 回答
0

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

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-26T16:36:39.687 回答