显示Google图片搜索等图片

是否有人知道一个脚本，它可以让我以Google图片搜索的方式显示图片结果（图片网格视图），并将鼠标悬停为放大和细节？ 一些我可以“即插即用”的东西可以这么说。

---

看看砌体http://masonry.desandro.com/

---

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

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

请注意，这段代码没有经过测试，并且是这个香草JavaScript插件的一个非常简化的版本：https：//fld-grd.js.org

---

这可能是你正在寻找... http://www.gethifi.com/demos/jphotogrid

链接地址: http://www.djcxy.com/p/53525.html

上一篇: Displaying images like Google Image Search

下一篇: Jpa QueryBuilder Multiple expressions in where clause not working