我正在创建像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;
}