javascript 显示像 Google 图片搜索这样的图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6561064/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Displaying images like Google Image Search
提问by Chad
Does anybody know of a script that will let me diplay image results in the way that Google Image Search does (image grid view) with hover to enlarge and details? Something that I can just "plug-and-play" so to speak.
有没有人知道一个脚本可以让我以谷歌图像搜索的方式显示图像结果（图像网格视图），悬停放大和细节？可以这么说，我可以“即插即用”的东西。
回答by Dex
Have a look at Masonry http://masonry.desandro.com/
回答by Daniel
First, you need to put all images inside a container element:
首先，您需要将所有图像放入容器元素中：
<div class="parent">
<img src="">
<img src="">
<img src="">
</div>
Then you need to make sure that the images are displayed in one line. This can be done by e.g. float: left. You should also set vertical-alignto remove the small gap underneath each image:
然后您需要确保图像显示在一行中。这可以通过例如完成float: left。您还应该设置vertical-align删除每个图像下方的小间隙：
img {
float: left;
vertical-align: top;
}
Finally you need some JavaScript to loop through all images and calculate the ideal rowHeight based on their dimensions. The only thing you need to tell this algorithm is the maximum row height that you want (rowMaxHeight)
最后，您需要一些 JavaScript 来遍历所有图像并根据它们的尺寸计算理想的 rowHeight。你唯一需要告诉这个算法的是你想要的最大行高 ( rowMaxHeight)
// Since we need to get the image width and height, this code should run after the images are loaded
var elContainer = document.querySelector('.parent');
var elItems = document.querySelector('.parent img');
var rowMaxHeight = 250; // maximum row height
var rowMaxWidth = elContainer.clientWidth;
var rowWidth = 0;
var rowRatio = 0;
var rowHeight = 0;
var rowFirstItem = 0;
var rowIsLast = false;
var itemWidth = 0;
var itemHeight = 0;
// Make grid
for (var i = 0; i < elItems.length; i++) {
itemWidth = elItems[i].clientWidth;
itemHeight = elItems[i].clientHeight;
rowWidth += itemWidth;
rowIsLast = i === elItems.length - 1;
// Check if current item is last item in row
if (rowWidth + rowGutterWidth >= gridWidth || rowIsLast) {
rowRatio = Math.min(rowMaxWidth / rowWidth, 1);
rowHeight = Math.floor(rowRatio * rowMaxHeight);
// Now that we know the perfect row height, we just
// have to loop through all items in the row and set
// width and height
for (var x = rowFirstItem; x <= i; x++) {
elItems[i].style.width = Math.floor(rowRatio * itemWidth * (rowMaxHeight/itemHeight)) + 'px';
elItems[i].style.height = rowHeight + 'px';
}
// Reset row variables for next row
rowWidth = 0;
rowFirstItem = i + 1;
}
}
Note that this code is not tested and a very simplified version of what this vanilla JavaScript plugin does: https://fld-grd.js.org
请注意，此代码未经测试，是此 vanilla JavaScript 插件功能的非常简化版本：https: //fld-grd.js.org
回答by tmcc
Two solutions that I have found so far.
到目前为止，我找到了两个解决方案。
$(function() {
$(window).on('resize', function() {
$('.openEntry').remove();
$('.entry').hide();
var startPosX = $('.preview:first').position().left;
console.log(startPosX);
$('.entry, .preview').removeClass("first last");
$('.entry').each(function() {
if ($(this).prev('.preview').position().left == startPosX) {
$(this).prev('.preview').addClass("first");
$(this).prevAll('.entry:first').addClass("last");
}
});
$('.entry:last').addClass("last");
});
$(window).trigger('resize');
$('.trigger').click(function() {
$('.openEntry').slideUp(800);
var preview = $(this).closest('.preview');
preview.next('.entry').clone().addClass('openEntry').insertAfter(preview.nextAll('.last:first')).slideDown(800);
});
$('body').on('click', '.close', function() {
$('.openEntry').slideUp(800).remove();
});
})
})
回答by A. Litsa
codropsactually puts the photo enlargement/details inline instead of as a modal overlay:
codrops实际上将照片放大/细节置于内联而不是作为模态叠加：
http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/
http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/
回答by Mahdi Hesari
Simply just repeat your images like this:
只需像这样重复您的图像：
<img style="float: left; height: 12em; margin-right: 1%; margin-bottom: 0.5em;border:1px solid lightgray" src="ImgSrc " />
回答by Jason Gennaro
This might be what you are looking for... http://www.gethifi.com/demos/jphotogrid
这可能就是您正在寻找的... http://www.gethifi.com/demos/jphotogrid
回答by Andiio
回答by Bruno
Check out this jQuery Plugin: https://github.com/brunjo/rowGrid.js
看看这个 jQuery 插件：https: //github.com/brunjo/rowGrid.js
It places images like on the Google image search.
它将图像放置在谷歌图像搜索中。
