使用 jquery 创建简单的缩略图网格扩展预览

Question

有没有其他方法可以替代这个参考http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/，有没有人知道资源，创建函数的简单步骤，如上面没有插件的链接，我的意思是使用简单的手写 jquery，我在使用它作为加载时网格不适合包装器宽度

谢谢

热情

Answer 1

我创建了一些类似的东西，使用了一些 jQuery，只是分享一下，可能会给你一些想法。
jsBin demo

HTML

<div id="preview">
  <img src=""><div><h2></h2><p></p></div>
</div>

<ul id="gooGallery">
  <li data-src="1.jpg" data-title="Description 1" data-alt="Name 1"></li>
  <li data-src="2.jpg" data-title="Description 2" data-alt="Name 2"></li>
  <li data-src="3.jpg" data-title="Description 3" data-alt="Name 3"></li>
</ul>

CSS：

*{ margin:0; padding:0; }
body{ color:#fff; background:#222;}
h1{ padding:2em; }
#gooGallery li{
  list-style:none;
  float:left;
  height:170px;
  background: none 50% / cover;
  transition:0.2s;
  cursor:pointer;
  width:25%;
}
#gooGallery li.active{ transform: scale(0.7) rotate(6deg) translateY(30px); }
#gooGallery li.active:after{
  content:"×";
  font-size: 4em;
  position:absolute;
  top:-67px;
  right:0;
}
#gooGallery li.full{ position:relative;  width:100%; height:auto; }
#preview{ display:none; }
#preview > *{ float:left; margin:2%; }
#preview img{ max-width:50%; }
@media screen and (max-width: 830px) {
    #gooGallery li{ width: 33.333%; }
    #preview img{ max-width:96%; }
}
@media screen and (max-width: 650px) {
    #gooGallery li{ width: 50%; }
    #preview img{ max-width:96%; }
}

jQuery:

var $prvw = $('#preview'),
    $gall = $('#gooGallery'),
    $li   = $gall.find("li"),
    $img  = $prvw.find("img"),
    $alt1 = $prvw.find("h2"),
    $alt2 = $prvw.find("p"),
    $full =  $("<li />", {"class":"full", html:$prvw});

$li.attr("data-src", function(i, v){
    $(this).css({backgroundImage: "url("+v+")"});
}).on("click", function( evt ){
    var $el = $(this),
        d = $el.data(),
        $clone = $full.clone();
    $el.toggleClass("active").siblings().removeClass("active");
    $prvw.hide();
    $full.after($clone);
    $clone.find(">div").slideUp(function(){
        $clone.remove();
    });
    if(!$el.hasClass("active")) return;
    $img.attr("src", d.src);
    $alt1.text(d.alt);
    $alt2.text(d.title);
    $li.filter(function(i, el){
        return el.getBoundingClientRect().top < evt.clientY;
    }).last().after($full);
    $prvw.slideDown();
});
$(window).on("resize", function(){
    $full.remove();
    $li.removeClass("active");
});