Google画像検索のような画像を表示

Question

画像の結果をGoogle Image Search（画像グリッドビュー）で表示するスクリプトを知っている人はいませんか？私がちょうど「プラグアンドプレイ」して話すことができるもの。

Answer 1

これは、あなたがhttp://www.gethifi.com/demos/jphotogrid

Answer 2

を見てくださいgPopプラグイン

DEMO

Download in Github

Answer 3

...何を探しているかもしれません石造http://masonry.desandro.com/

Answer 4

を見てください

このjQueryプラグインのチェックアウト：https://github.com/brunjo/rowGrid.js

Google画像検索のように画像を配置します。

Answer 5

私が今までに見つけた2つの解決策。

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> 

その後、あなたは画像が1行に表示されていることを確認する必要があります。これは、例えば、 float: left。また、各画像の下に小さなギャップを削除するvertical-alignを設定する必要があります。

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

を最後にあなたはすべての画像をループし、いくつかのJavaScriptを必要とし、その寸法に基づいて理想的なrowHeightのを計算します。 https://fld-grd.js.org

を：あなたはこのアルゴリズムを伝える必要があります唯一の事は、あなたが（ 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のプラグイン何をするかの非常に単純化されたバージョンが欲しい最大の行の高さであります

Answer 8

は、単純にこのようにあなたのイメージを繰り返します。これはよさそう

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