logo标签列表

像Google图片搜索一样显示图片

javascriptjqueryuser-interface
9

有没有人知道一种脚本，可以像Google图片搜索那样显示图像结果（图像网格视图），并且可以通过悬停放大和查看详细信息？最好是一种可以“即插即用”的东西。

8个回答
2
首先，您需要将所有图像放在一个容器元素中：
<div class="parent">
    <img src="">
    <img src="">
    <img src="">
</div>

接下来，您需要确保图像在同一行中显示。这可以通过使用float: left等方式来实现。您还应该设置vertical-align以消除每个图像下方的小间隙：

img {
    float: left;
    vertical-align: top;
}

最后，您需要一些JavaScript来循环遍历所有图像，并根据它们的尺寸计算理想的行高。您只需要告诉此算法的是您想要的最大行高（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;
    }
}

请注意，此代码未经过测试，是这个纯JavaScript插件的一个非常简化的版本：https://fld-grd.js.org。
2
1

我目前找到的两个解决方案：

教程博客

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

})

1
请从外部链接中提取示例。这是一个好的做法，因为链接可能会在某一天过期，那么你的答案将对他人没有用处。谢谢！ - Shawn
0

只需像这样重复您的图像：

<img style="float: left; height: 12em; margin-right: 1%; margin-bottom: 0.5em;border:1px solid lightgray" src="ImgSrc " />
0
0
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接