显示Google图片搜索等图片
有没有人知道一个脚本会让我以谷歌图片搜索的方式（图像网格视图）显示图像结果，并hover放大和细节？ 我可以直接“即插即用”的东西。
看看Masonry http://masonry.desandro.com/
首先，您需要将所有图像放在容器元素中：
![]()
![]()
![]()
然后，您需要确保图像显示在一行中。 这可以通过例如float: left来完成。 您还应该设置vertical-align以移除每个图像下方的小间隙：
img { float: left; vertical-align: top; }
最后，您需要一些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; } }
请注意，此代码未经过测试，并且是这个vanilla JavaScript插件所做的非常简化的版本： https ： //fld-grd.js.org
这可能就是你要找的…… http://www.gethifi.com/demos/jphotogrid
看看gPop插件
DEMO
在Github下载
看看这个jQuery插件： https ： //github.com/brunjo/rowGrid.js
它会将图像放在Google图像搜索上。
到目前为止我找到了两个解决方案。
教程博客
的jsfiddle
$(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(); });
}）
codrops实际上将照片放大/细节内联而不是模态叠加：
http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/
只需重复您的图像，如下所示：
