砌体布局图像重叠

Question

我正在创建像Google这样的搜索引擎。我正在使用砖石结构使图像彼此对齐，但是我遇到了问题。当我通过清除缓存重置页面时，图像重叠。但是，当我仅通过单击“刷新”按钮进行刷新时，图像就会像它们一样并排放置。有人可以在js代码运行之前帮助我获取图像的高度和宽度吗？

ImageResultsProvider.php：

<?php

class ImageResultsProvider {

private $con;

public function __construct($con) {

    $this->con = $con;
}

public function getNumResults($term){

    $query = $this->con->prepare("SELECT COUNT(*) as total
    FROM images WHERE (title LIKE :term OR alt LIKE :term) AND broken=0");

    $searchTerm = "%". $term . "%";
    $query->bindParam(":term", $searchTerm);
    $query->execute();

    $row = $query->fetch(PDO::FETCH_ASSOC);
    return $row["total"];

}

public function getResultsHtml($page, $pageSize, $term) {

    $fromLimit = ($page - 1) * $pageSize;

    $query = $this->con->prepare("SELECT * FROM images WHERE 
    (title LIKE :term OR alt LIKE :term) AND broken=0
    ORDER BY clicks DESC LIMIT :fromLimit, $pageSize");

    $searchTerm = "%". $term . "%";
    $query->bindParam(":term", $searchTerm);
    $query->bindParam(":fromLimit", $fromLimit, PDO::PARAM_INT);
    $query->bindParam(":pageSize", $pageSize, PDO::PARAM_INT);
    $query->execute();

    $resultsHtml = "<div class='imageResults'>";

    while ($row = $query->fetch(PDO::FETCH_ASSOC)) {

        $id = $row["id"];
        $imageUrl = $row["imageUrl"];
        $siteUrl = $row["siteUrl"];
        $title = $row["title"];
        $alt = $row["alt"];

        if($title) {

            $displayText = $title;
        }
        else if ($alt) {
            $displayText = $alt;
        }
        else {

            $displayText = $imageUrl;
        }

        $resultsHtml .= "<div class='gridItem'>

                    <a href='$imageUrl'>

                        <img src='$imageUrl'>

                        <span class='details'>$displayText</span>

                    </a>

                </div>";
    }

    $resultsHtml .= "</div>";

    return $resultsHtml;
}

}

?>

script.js：

$(document).ready(function() {

$(".result").on("click", function() {

    var id = $(this).attr("data-linkId");
    var url = $(this).attr("href");

    if(!id){

        alert("Link not found");
    }

    increaseLinkClicks(id, url);

    return false;

});

var grid = $(".imageResults");
grid.masonry({

    columnWidth: 120,
    gutter: 15

});

});

function increaseLinkClicks(linkId, url) {

$.post("ajax/updateLinkCount.php", {linkId: linkId})
.done(function(result) {

    if(result != "") {

        alert(result);
        return;
    }

    window.location.href = url;

});

}

styles.css：

.gridItem {

position: relative;
}

.gridItem img {

max-width: 200px;
min-width: 50px;
min-height: 50px;
max-height: 200px;


}