Question

我使用Masonry有多个div。

现在，当我点击div sth1，sth3或任何其他时，我希望这个点击的div能够伸展100％的宽度，然后将前一个div放在它们所在的位置并移动div的其余部分＆＃39; s down。

此问题仅适用于调整浏览器窗口大小的问题。试试吧。

如何在不调整大小的情况下改善这一点？我错过了什么吗？

＆＃13;

$(".grid").masonry({ itemSelector: '.grid-item', columnWidth: 10 });

$(".span_1_of_3").click(function() {
  $(this).closest("div.grid-item").css({
    "width": "100%",
    "height": "250px",
    "position": "relative",
    "left": "0"
  });

  $(this).closest("div.grid-item").prev().next().css({
    "width": "100%",
    "height": "250px",
    "position": "relative",
    "left": "0"
  });
});

//ovo je generator razlicitih fontova i boja za tagove
var colors = ['#e74c3c', '#af7ac5', '#5499c7', '#e67e22', '#aab7b8', '#DAF7A6', '#229954', '#f5b7b1', '#f7dc6f', '#7d3c98', '#3498db'];
/*najdi div unutar grid div-a*/
$('.grid').find('.grid-item').each(function(e) {
  //primjeni boju
$(this).css("background-color", colors[Math.floor(Math.random() * colors.length)]);
});

＆＃13;

.grid {
  max-width: 100%;
}

.grid:after {
  content: '';
  display: block;
  clear: both;
}

.grid-sizer,
.grid-item {
  width: 20%;
}

.grid-item {
  float: left;
}

.grid-item {
  width: 200px;
}

.grid-item--width2 {
  width: 400px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<div class="grid">
  <div class="grid-item grid-item--width2">
    <div class="col span_1_of_3">Sth1</div>
  </div>
  <div class="grid-item grid-item--width2">
    <div class="col span_1_of_3">Sth2</div>
  </div>
  <div class="grid-item grid-item--width2">
    <div class="col span_1_of_3">Sth3</div>
  </div>
  <div class="grid-item grid-item--width2">
    <div class="col span_1_of_3">Sth4</div>
  </div>
</div>

＆＃13;

Answer 1

解决了CBroe的导航：

var $grid = $('.grid').masonry({
columnWidth: 120
});
$grid.on( 'click', '.grid-item', function() {

$(this).toggleClass('grid-item--gigante');
$(this).find(".div_to_be_exposed").show();
$grid.masonry('layout');
});

和css：

.grid-item--gigante {
  width: 100%;
  z-index: 2; /* above other items */
}

谢谢！

漂浮div和清除使用砌体

1 个答案: