javascript - 自动排列div，同时放大一个div

Question

我一直在尝试创建一个图库应用程序，用户将鼠标悬停在 div 上，它会变大，但其余高度保持不变。您可以在此代码笔片段的示例中看到这种情况。

问题:问题是当我将鼠标悬停在某些 div 上时，它没有正确排列。任何人都可以帮助我让它变得像这样没有 div 离开父 div 并填写父 div。

$( '.preview' ).on( 'mouseover', function() {
    $( '.preview' ).removeClass( 'active' );
    $( this ).addClass( 'active' )
}).each( function( i, el ) {
    $( el ).append( '<span>' + i + '</span>' )
});

body {
  font-family: sans-serif;
}

* {
  box-sizing: border-box;
}

.main {
  width: 400px;
  height: 500px;
  background: red;
  font-size: 0;
}

.preview {
  position: relative;
  width: 100px;
  height: 100px;
  background: white;
  border: 1px solid grey;
  transition: width 1s;
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
  float: left;
}

.active {
  width: 200px;
  height: 200px;
}

.preview>span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: black;
  font-size: 32px;
}

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

<div class="main">
  <div class="preview active"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
  <div class="preview"></div>
</div>

Answer 1

您可以使用 CSS Grid 布局模块:

A Complete Guide to Grid

示例:

$( '.preview' ).on( 'mouseover', function() {
    $( '.preview' ).removeClass( 'active' );
    $( this ).addClass( 'active' )
}).each( function( i, el ) {
    $( el ).append( '<span>' + i + '</span>' )
});

.main {
    width: 400px;
    height: 500px;
    background-color: red;
    /* CSS Grid */
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto auto auto;
    grid-gap: 0
}
.preview {
    border: 1px solid #ddd;
    background-color: #fff;
    text-align: center;
    font-size: 32px;
    transition: all 1s
}
.active{
    grid-column: span 2;
    grid-row: span 2;
    background-color: rgba(255, 255, 255, .9)
}

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

<div class="main">
    <div class="preview active"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
</div>