jQuery在图像下扩展图像组合

Question

我正在努力使扩展缩略图组合与Google图像一样。使用这个jquery

$('.thumbs a').click(function(e) {
hideNotInUse();
var tmp_div = $(this).parent().index();
$('.about div').eq(tmp_div).show();
});

function hideNotInUse() {
    $('.about div').each(function() {
        $(this).hide();
    });
    }
hideNotInUse();

我从http://jsfiddle.net/hQ7y5/开始，并添加了图片（之后我将添加视频＆＃39; s并设置所有内容）＆gt; http://jsfiddle.net/RvMouche/ruj3358s/

如果您使用的是全屏桌面窗口，它可以正常工作，您可以将四个图像彼此相邻，如果您单击一个指定的div节目。但是，如果您使用较小的窗口，则一个或多个图片向下移动（预期），并且指定的div显示在最后一个图像下，而它应显示在图像本身下方。

另外，如果第二次点击图片，它应该隐藏div

关于如何做到这一点的任何想法？

Answer 1

Google图片设置的方式远比您在此处所做的更复杂。如果您使用开发工具稍微探讨一下，您会明白为什么。

当窗口调整大小时，列表中的所有图像容器都会动态地给出宽度，并且基于某种断点，这最终会在不同窗口大小的每个“行”中显示N张图片。知道每行中有N张图片，当您点击图片时，他们会在该行中找到Nth图片（也就是最后一张）并在之后放置一个大的block级别元素它，破坏了inline-block级别元素的流程。这为信息填充创造了空间。当窗口调整大小并且“行”大小发生变化时，它们会将面板移动到新“行”的末尾。

您的代码存在的问题是，您的.content元素总是位于整个列表之后，而不是放在列表中的右侧部分。

我现在要忽略动态大小的行，因为它会使示例复杂化，并专注于HTML结构，以及查找和追加方面。

DEMO

首先点击.item。我们在.item元素的“列表”中获取.item的索引，并删除所有现有的显示面板。如果我们的索引与之前单击的索引相同，我们只需将记录的索引设置为null，不做任何其他操作。否则，我们采用索引并在modulo-remainder运算符的帮助下递归地找到'row'的结尾。使用此新索引，我们可以定位“行”中的最后一个.item，并在其后面放置一个block级别面板。

与谷歌图片相比，这是一个非常基本的例子，但它基本上是相同的逻辑。

var displayElement = $('<div />', {
      class: 'display'
    });

var findEnd = (function () {
  var rowSize = 4;
  
  return (function (idx) {
    if (idx <= rowSize) return rowSize;
    
     if (idx % rowSize !== 0) {
       return findEnd(idx + 1);
     } else {
       return idx;
     }
  });
}());

var itemClick = (function () {
  var currentItem;
  
  return (function (e) {
    var self = $(this),
        index = self.index('.item'),
        end, target;
    
    $('.display').remove();
    $('.item.active').removeClass('active');
    
    if (currentItem !== index) {
      end = findEnd(index + 1);
      target = $('.item').eq(end - 1);
      
      self.addClass('active');
      target.after(displayElement.text(index));
    
      currentItem = index;
    } else {
      currentItem = null;
    }
  });
}());


$('.item').on('click', itemClick);

.wrap {
  position: relative;
  width: 100%;
}

.item {

  display: inline-block;
  box-sizing: border-box;
  width: calc(100% / 4 - 3px);
  height: 80px;
  
  background-color: #aaa;
}

.item.active {
  border: 2px solid #333;
}

.display {
  margin-bottom: 4px;
  display: block;
  width: 100%;
  height: 120px;
  
  background-color: #333;
  font-family: sans-serif;
  font-size: 3em;
  line-height: 120px;
  text-align: center;
  color: #eee;
}

<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

注意：上面我使用术语列表和行非常松散，用引号表示。不要与实际的<ol>，<ul>，<li>和<tr>元素混淆。此示例不包含真正的列表或表元素。