Question

Here是Gridly的链接。

正如您所看到的，当我们点击一个框时，它会展开。现在，我需要的是，当盒子展开时，它会显示出一些东西。

我到底要做的是，当它很小的时候，我会把一个图像覆盖在盒子上。当它扩展时，一些文本将与图像一起显示。 Here就是一个例子。它有点类似于此。我该怎么办？

Answer 1

代码为单页：

<html>
<head>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="jquery.gridly.js" type="text/javascript"></script>
<link href="jquery.gridly.css" rel="stylesheet" type="text/css" />
<style type="text/css">
  .gridly {
    position: relative;
    width: 960px;
  }
  .brick {
    overflow: hidden;
  }
  .brick img {
    padding: 10px;
  }
  .brick div {
    padding: 0 10px 0 10px;
  }
  .brick.small {
    width: 140px;
    height: 140px;
    background-color: gray;
  }
  .brick.large {
    width: 300px;
    height: 300px;
    background-color: #B0B0B0;
  }
</style>
</head>
<body>
<div class="gridly">
  <div class="brick small"><img src="http://placehold.it/120x120" /><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</div></div>
  <div class="brick small"><img src="http://placehold.it/120x120" /><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</div></div>
  <div class="brick large"><img src="http://placehold.it/120x120" /><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</div></div>
  <div class="brick small"><img src="http://placehold.it/120x120" /><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</div></div>
  <div class="brick small"><img src="http://placehold.it/120x120" /><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</div></div>
  <div class="brick small"><img src="http://placehold.it/120x120" /><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</div></div>
  <div class="brick small"><img src="http://placehold.it/120x120" /><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</div></div>
  <div class="brick small"><img src="http://placehold.it/120x120" /><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</div></div>
  <div class="brick small"><img src="http://placehold.it/120x120" /><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</div></div>
  <div class="brick large"><img src="http://placehold.it/120x120" /><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</div></div>
  <div class="brick small"><img src="http://placehold.it/120x120" /><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</div></div>
  <div class="brick small"><img src="http://placehold.it/120x120" /><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</div></div>
  <div class="brick small"><img src="http://placehold.it/120x120" /><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</div></div>
</div>
<script>
  $('.gridly').gridly({
    base: 60, // px 
    gutter: 20, // px
    columns: 12
  });
  $('.brick').click(function() {
    $this = $(this);

    // toggle the size of the brick using css class
    $this.toggleClass('large').toggleClass('small');

    // this is set to ensure the layout is carried out on the final size of the brick
    size = $this.hasClass('small') ? 140 : 300;
    $this.data('width', size);
    $this.data('height', size);

    return $('.gridly').gridly('layout');
  });

</script>
</body>

javascript取自github上的示例：https://github.com/ksylvest/jquery-gridly/blob/master/javascripts/sample.js。当砖块调整大小时，文本“流动”一点，固定大小的文本div会阻止它。

漂亮的插件btw，网格地为你处理几乎所有动画的痛苦，颜色和大小都是自动插值的。

Answer 2

虽然您将此问题标记为javascript和jquery，但这对我来说似乎是一个CSS问题。单击一个框时查看DOM。您可以看到它切换small和large类。如果要在单击框时更改某些内容的外观，请在small砖块和large砖块中为该元素定义css。

在不知道你真正想要什么的情况下，我无法提出太多建议。单击砖块时图像变大的示例是：

<div class="brick small">
  <img src="http://placekitten.com/300/300" />
</div>

用css：

.brick.small img {
  width: 140px;
  height: 140px;
}

.brick.large img {
  width: 300px;
  height: 300px;
}

修改jQuery Gridly插件

2 个答案: