jquery - div 互相撞到对方的底部

Question

我正在使用 jQuery Masonry，并且 div 正在相互流入。有什么帮助吗？

CSS:

div.cards div.card{
    width: 310px;
    margin: 11px;
    float: left;
    background: white;
    -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2x;
}

div.cards div.card img{
    max-width: 310px;
    min-width: 310px;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

div.cards div.card div.data{
    padding: 10px;
    width: 290px;
}

div.cards div.card div.data div.title{
    font-size: 17px;
    color: #2f3132;
    font-weight: 700;
}

div.cards div.card div.data div.information{
    font-size: 13px;
    color:#a0a7ab;
    overflow: auto;
    padding-top: 5px;
}

div.cards div.card div.data div.information span.username{
    float: left;
    overflow: auto;
}

div.cards div.card div.data div.information span.date{
    float: right;
    overflow: auto;
}

HTML/PHP:

<div class="card">
    <img src="<?=$url; ?>" />
        <div class="data">
            <div class="title">
                <a href="http://reddit.com<?=$reddit_post_premalink; ?>" target="_blank"><?php if($reddit_post_over18 == 1){ ?><span class="nsfw">[NSFW] </span><?php } ?><?=$reddit_post_title; ?></a>
            </div>
            <div class="information">
                <span class="username"><?=$reddit_post_author; ?></span>
                <span class="date"><?=post_date($reddit_post_created); ?></span>
            </div>
        </div>
    </div>

发生了什么:

Answer 1

可能的问题:

Masonry 在所有图像加载完成之前运行，导致每张卡片的高度计算错误。

解决方案:

1. 使用 CSS 固定每个 .card div 的高度。
2. 使用imagesLoaded()仅在加载父容器中的所有图像后才运行砌体的插件。