jQuery 砌体和 CSS3答案

【问题标题】：jQuery Masonry and CSS3jQuery 砌体和 CSS3
【发布时间】：2013-03-21 21:21:27
【问题描述】：

我如何保持砖石布局，同时将 CSS3 过渡与当前图像结合起来？

这是我的 html

<body>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="masonry.js"></script>
<script>
$(function () {
      $('#container').masonry({
          columnWidth: 1,
          itemSelector: 'div'
      });
});
</script>


<div id="imagetrans">
  <img class="bottom" src="images/eventbox2.png" />
  <img class="top" src="images/eventbox.png" />
</div>


<div id="logo">
</div>

<div id="container" class="clearfix masonry">

<div class="item1"><img src="images/eventbox.png"></img></div>
<div class="item4"><img src="images/forumbox.png"></img></div>
<div class="item2"><img src="images/weekbox.png"></img></div>
<div class="item2"><img src="images/weekbox.png"></img></div>
<div class="item2"><img src="images/weekbox.png"></img></div>
<div class="item2"><img src="images/weekbox.png"></img></div>
<div class="item3"><img src="images/top10box.png"></img></div>
<div class="item1"><img src="images/eventbox.png"></img></div>

</div>


</body>

还有 CSS

html {
  height:100%;
}

body {
  width:900px;
  height:100%;
  margin:0 auto;
  margin-top:100px;
  background-image: url(images/gridbg.png);
}

#logo {
}


#container > div {
    margin: 5px;


#imagetrans {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#imagetrans img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#imagetrans img.top:hover {
  opacity:0;
}

虽然我不知道如何将它们连接在一起，但我已经设法将它们分开了所有这一切。

有什么想法吗？

【问题讨论】：

Masonry 使用 absolute 和 relative 属性定位元素。我不会使用left: 0。
@MattCurtis 不太确定我明白你的意思吗？ CSS3 过渡工作“查看 div imagetrans”，砌体也工作 - 虽然我不明白我将如何使用砌体中的过渡

标签： jquery css css-transitions jquery-masonry

【解决方案1】：

给你：http://jsbin.com/ifequp/2

使用演示右上角的编辑按钮查看代码。

jQuery Masonry 不会干扰您的悬停不透明技术，因此任务是简单地将一个放入另一个中。

下次您寻求帮助时，请在 http://jsbin.com 上发布您的 HTML/CSS/JS。不要粘贴整个网站，只粘贴您遇到问题的部分。

PS 我发现 1s 的转换太令人不安了。考虑将时间降低到 0.3 秒左右。

【讨论】：