Hiển thị hình ảnh như Tìm kiếm Hình ảnh của Google

Question

Có ai biết một tập lệnh sẽ cho phép tôi phê duyệt kết quả hình ảnh theo cách mà Google Image Search thực hiện (xem lưới hình ảnh) bằng cách di chuột để phóng to và chi tiết không? Một cái gì đó mà tôi chỉ có thể "plug-and-play" để nói chuyện.

Answer 1

Có một cái nhìn tại Masonry http://masonry.desandro.com/

Answer 2

Điều này có thể được những gì bạn đang tìm kiếm ... http://www.gethifi.com/demos/jphotogrid

Answer 3

có một cái nhìn tại các plugin gPop

DEMO

Download in Github

Answer 4

Kiểm tra Plugin jQuery này: https://github.com/brunjo/rowGrid.js

Nó đặt hình ảnh như trên tìm kiếm hình ảnh của Google.

Answer 5

Hai giải pháp mà tôi đã tìm thấy cho đến thời điểm này.

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 thực sự đặt ảnh mở rộng/chi tiết nội tuyến thay vì như một lớp phủ modal:

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

Answer 7

Trước tiên, bạn cần phải đặt tất cả hình ảnh bên trong một yếu tố container:

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

Sau đó, bạn cần phải chắc chắn rằng những hình ảnh được hiển thị trong một dòng. Điều này có thể được thực hiện bằng ví dụ: float: left. Bạn cũng nên đặt vertical-align để loại bỏ các khoảng trống nhỏ bên dưới mỗi hình ảnh:

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

Cuối cùng, bạn cần một số hoạt Javascript để lặp qua tất cả hình ảnh và tính toán rowHeight lý tưởng dựa trên kích thước của chúng. Điều duy nhất bạn cần phải nói cho thuật toán này là chiều cao hàng tối đa mà bạn muốn (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; 
    } 
} 

Lưu ý rằng mã này không được thử nghiệm và một phiên bản rất đơn giản của những gì vani này JavaScript Plugin làm: https://fld-grd.js.org

Answer 8

Chỉ cần lặp lại hình ảnh của bạn như sau:

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