Question

有没有人知道一个脚本会让我以Google图片搜索的方式显示图片结果（图片网格视图）并悬停放大和细节？我可以直接“即插即用”的东西。

Answer 1

Answer 2

首先，您需要将所有图像放在容器元素中：

<div class="parent">
    <img src="">
    <img src="">
    <img src="">
</div>

然后您需要确保图像以一行显示。这可以通过例如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

Answer 3

到目前为止我找到了两种解决方案。

tutorial blog

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();
});

}）

Answer 4

这可能就是您要找的...... http://www.gethifi.com/demos/jphotogrid

Answer 5

看一下gPop插件

DEMO

Download in Github

Answer 6

查看此jQuery插件：https://github.com/brunjo/rowGrid.js

将图片放置在Google图片搜索上。

Answer 7

codrops 实际上将照片放大/细节内联而不是模态叠加：

http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/

Answer 8

只需重复这样的图片：

<img style="float: left; height: 12em; margin-right: 1%; margin-bottom: 0.5em;border:1px solid lightgray" src="ImgSrc " />

显示Google图片搜索等图片

8 个答案: