顯示圖像像谷歌圖像搜索

Question

有誰知道一個腳本，可以讓我以Google圖像搜索的方式顯示圖像結果（圖像網格視圖）並將鼠標懸停以放大和細節？一些我可以「即插即用」的東西可以這麼說。

Answer 1

看一看砌體http://masonry.desandro.com/

Answer 2

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

Answer 3

看看在gPop插件

DEMO

Download in Github

Answer 4

看看這個jQuery插件：https://github.com/brunjo/rowGrid.js

它將圖像放在Google圖片搜索上。

Answer 5

迄今爲止發現的兩種解決方案。

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 6

codrops其實是把照片放大/細節直列而不是作爲覆蓋模式：

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

Answer 7

首先，你需要把所有圖像容器的元素：

<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

Answer 8

只是簡單地重複你的圖片是這樣的：

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