jQuery扩展图像组合下的图像

jQuery extending image portfolio under image

本文关键字：图像 组合 jQuery 扩展      更新时间：2023-09-26

我正试图使扩展缩略图组合工作相同的谷歌图像。使用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/开始并添加图片到混合(稍后我会添加视频和样式)> http://jsfiddle.net/RvMouche/ruj3358s/

如果你使用全屏桌面窗口，你有四个图像彼此相邻，如果你点击一个指定的div显示。然而，如果你使用一个较小的窗口，一个或多个图片向下移动(预期)，指定的div显示在最后一个图像下，而它应该显示在图像本身下。

同样，如果图片被第二次点击，它应该隐藏div

你知道怎么做吗?

Google Images设置这个的方式远比你在这里所做的要复杂得多。如果你使用你的开发工具，你就会明白为什么了。

列表中的所有图像容器都被动态地给定宽度作为窗口调整大小，并且基于某种断点，这最终成为N图片在不同窗口大小的每一行。知道每一行都有N的图片，当你点击一张图片时，他们会在那一行(也就是最后一张)找到Nth的图片，并在它后面放置一个大的block级元素，扰乱inline-block级元素的流动。这为信息填充创造了一个空间。当窗口大小改变时，"行"的大小改变，他们将面板移动到新"行"的末尾。

你的代码的问题是，你的.content元素将总是被定位在整个列表之后，而不是放置在列表的正确部分。

我现在将忽略动态大小的行，因为它使示例过于复杂，并将重点放在HTML结构以及查找和追加方面。

演示

我们首先点击一个.item。我们在.item元素的"列表"中获得.item的索引，并删除任何现有的显示面板。如果我们的索引与之前单击的索引相同，我们只需将记录的索引设置为null，不做任何其他操作。否则，我们取我们的索引，并在模余运算符的帮助下递归地找到"行"的末尾。有了这个新的索引，我们可以瞄准'行'中的最后一个.item，并在它后面放置一个block级别的面板。

与Google Images相比，这是一个非常基本的例子，但基本上是相同的逻辑。

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>元素混淆。此示例不包含真正的列表或表元素

相关文章：