L'affichage des images comme Google Recherche d'Images

Quelqu'un sait d'un script qui me permettra de affichait des résultats de l'image dans la façon dont Google Recherche d'Images (image affichage de la grille) avec hover pour les agrandir et les détails? Quelque chose que je peux juste "plug-and-play" pour ainsi dire.

OriginalL'auteur Chad | 2011-07-03

  1. 2

    Ont un look à la Maçonnerie http://masonry.desandro.com/

    cela semble bon, je suis de le vérifier.

    OriginalL'auteur Dex

  2. 2

    Tout d'abord, vous devez mettre toutes les images à l'intérieur d'un élément de conteneur:

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

    Alors vous devez vous assurer que les images sont affichées sur une seule ligne. Cela peut être fait par exemple par float: left. Vous devez également définir vertical-align à retirer le petit trou situé sous chaque image:

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

    Enfin, vous avez besoin d'un peu de JavaScript pour faire une boucle à travers toutes les images et calculer l'idéal rowHeight en fonction de leurs dimensions. La seule chose que vous devez dire à cet algorithme est le maximum de la hauteur de ligne que vous souhaitez (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;
    }
}

    Noter que ce code n'est pas testé et une version très simplifiée de ce que cela vanille JavaScript plugin n': https://fld-grd.js.org

    OriginalL'auteur Daniel

  3. 1

    Deux solutions que j'ai trouvé jusqu'à présent.

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

    })

    OriginalL'auteur tmcc

  4. 0

    Ce pourrait bien être ce que vous cherchez... http://www.gethifi.com/demos/jphotogrid

    CSS 3 dépendants?

    OriginalL'auteur Jason Gennaro

  5. 0

    Ont un look à la gPop plugin

    DÉMO

    Télécharger sur Github

    OriginalL'auteur Andiio

  6. 0

    Découvrez ce Plugin jQuery: https://github.com/brunjo/rowGrid.js

    Il met les images comme sur la recherche d'images de Google.

    OriginalL'auteur Bruno

  7. 0

    codrops se met la photo de l'élargissement/détails inline plutôt que comme une superposition modale:

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

    Merci de l'extrait de l'exemple du lien externe. La raison que c'est une bonne pratique de lien pourraient prendre fin un jour, et puis, votre réponse ne sera pas utile à d'autres. Merci!

    OriginalL'auteur A. Litsa

  8. 0

    Il suffit juste de répéter vos images comme ceci:

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

    OriginalL'auteur Mahdi Hesari