javascript - 我如何摆脱这个多余的空间

基本上，我的“div class=”grid“”之间有额外的空间（图片之间的空间）。如果你在我的片段中点击“季节性”和“杯子”，你就会明白我的意思。我试图通过在css中添加“display:none；clear:both；”“on my.hide”类来消除这个多余的空间，但是没有任何东西可以工作。我觉得这个问题可以在js中解决，但我不知道如何编写它。
最终，我试图设计一个图库页面，用户可以通过点击不同的分类项目（如“杯子”和“衣服和配件”）来对图像进行排序，同时保持pintrest类型的风格，因为图像都是不同大小的。我就快到了，但我在页面上有一个多余的空间。

$(document).ready(function(){
  $('.category_item').click(function(){
    var category = $(this).attr('id');

    if(category == 'all'){
      $('.grid').addClass('hide');
      setTimeout(function(){
        $('.grid').removeClass('hide');
      }, 300);
    } else {
      $('.grid').addClass('hide');
      setTimeout(function(){
        $('.' + category).removeClass('hide');
      }, 300);
    }

    if(category == 'all'){
      $('.gallery_item').addClass('hide');
      setTimeout(function(){
        $('.gallery_item').removeClass('hide');
      }, 300);
    } else {
      $('.gallery_item').addClass('hide');
      setTimeout(function(){
        $('.' + category).removeClass('hide');
      }, 300);
    }

  });
});

/* Gallery */
#gallery_wrapper {
  width: 800px;
  margin: 12px 50px 12px 50px;
  background-color: #fff;
  text-align: center;
  border-radius: 12px;
}

#category {
  margin: 40px 0px 20px 0;
}

#category h2 {
  padding-top: 22px;
  margin-bottom: 12px;
}

#category h2 {
  display: grid;
  align-items: center;
  text-align: center;
  grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
  grid-gap: 20px;
}

#category h2::before {
  content: '';
  margin-left: 24px;
  border-top: 1px solid;
}

#category h2::after {
  content: '';
  margin-right: 24px;
  border-top: 1px solid;
}

#category ul li {
  display: inline;
  list-style-type: none;
}

.category_item {
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  margin: 0 40px 0 0;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

.hide {
  transform: scale(0);
  width: 0;
  padding: 0;
  transition: all 250ms ease-in-out;
}

/* Gallery items (pictures, columns, etc.) */
#gallery_item_wrapper {
  width: 90%;
  max-width: 800px;
  min-width: 400px;
  margin: 50px auto;
}

#columns {
  padding: 0 15px 0 15px;
  -webkit-column-count: 2;
  -webkit-column-gap: 10px;
  -webkit-column-fill: auto;
  -moz-column-count: 2;
  -moz-column-gap: 10px;
  -moz-column-fill: auto;
  column-count: 2;
  column-gap: 15px;
  column-fill: auto;
}

.grid {
  display: inline-block;
  background: #fefefe;
  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
  margin: 0 2px 15px;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
  padding: 15px;
  padding-bottom: 5px;
  background: -webkit-linear-gradient(45deg, #fff, #f9f9f9);
  opacity: 1;
  -webkit-transition: all 250ms ease;
  -moz-transition: all 250ms ease;
  transition: all 250ms ease;
}

.grid img {
  width: 100%;
  border-bottom: 1px solid #ccc;
  padding-bottom: 15px;
  margin-bottom: 5px;
}

.grid p {
  font: 12px/18px Arial, Helvetica, "sans-serif";
  color: #333;
  margin: 0;
}

@media (min-width: 560px) {
	#columns {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;}
}

@media (min-width: 800px) {
	#columns {
		-webkit-column-count: 4;
		-moz-column-count: 4;
		column-count: 4;}
}

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

<div id="category">
    <h2>Gallery</h2>
    <ul>
        <li class="category_item" id="all">All</li>
        <li class="category_item" id="cup">Cups</li>
        <li class="category_item" id="seasonal">Seasonal</li>
        <li class="category_item" id="clothing">Clothing and Accesories</li>
        <li class="category_item" id="misc">Misc</li>
    </ul>
</div>

<div class="gallery_item_wrapper">
    <div id="columns">
        <div class="grid cup">
            <img src="images/cups/cup1.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup2.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup seasonal">
            <img src="images/cups/cup3.jpg" class="gallery_item cup seasonal">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup4.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup5.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup6.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup7.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup9.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup10.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup11.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup13.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup14.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup15.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup16.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup17.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup18.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup19.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup20.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup21.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup22.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup23.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup24.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid seasonal">
            <img src="images/items/a4.jpg" class="gallery_item seasonal">
            <p>Something Cup</p>
        </div>

        <div class="grid seasonal">
            <img src="images/items/a3.jpg" class="gallery_item seasonal">
            <p>Something Cup</p>
        </div>

        <div class="grid seasonal">
            <img src="images/items/a22.jpg" class="gallery_item seasonal">
            <p>Something Cup</p>
        </div>

        <div class="grid seasonal">
            <img src="images/items/a23.jpg" class="gallery_item seasonal">
            <p>Something Cup</p>
        </div>

        <div class="grid seasonal">
            <img src="images/items/a24.jpg" class="gallery_item seasonal">
            <p>Something Cup</p>
        </div>
    </div>
</div>

最佳答案

我稍微调整了一下你的css，用flexbox设置网格。看看这些对你是否有用。

$(document).ready(function() {
  $('.category_item').click(function() {
    var category = $(this).attr('id');

    if (category == 'all') {
      $('.grid').removeClass('hide');
    } else {
      $('.grid').addClass('hide');
      $('.' + category).removeClass('hide');
    }

  });
});

/* Gallery */

#gallery_wrapper {
  width: 800px;
  margin: 12px 50px 12px 50px;
  background-color: #fff;
  text-align: center;
  border-radius: 12px;
}

#category {
  margin: 40px 0px 20px 0;
}

#category h2 {
  padding-top: 22px;
  margin-bottom: 12px;
}

#category h2 {
  display: grid;
  align-items: center;
  text-align: center;
  grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
  grid-gap: 20px;
}

#category h2::before {
  content: '';
  margin-left: 24px;
  border-top: 1px solid;
}

#category h2::after {
  content: '';
  margin-right: 24px;
  border-top: 1px solid;
}

#category ul li {
  display: inline;
  list-style-type: none;
}

.category_item {
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  margin: 0 40px 0 0;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}


/* Gallery items (pictures, columns, etc.) */

#gallery_item_wrapper {
  width: 90%;
  max-width: 800px;
  min-width: 400px;
  margin: 50px auto;
}

#columns {
  width: 100%;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}

.grid {
  background: #fefefe;
  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
  box-sizing: border-box;
  padding: 15px 15px 5px;
  background: -webkit-linear-gradient(45deg, #fff, #f9f9f9);
  transition: all 250ms ease-in-out;
  overflow: hidden;
  width: calc(50% - 20px);
  border: 1px solid navy;
  margin: 10px;
  transform-origin: 50% 50%;
  min-height: 100px;
}

.grid.hide {
  transform: scale(0);
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.grid img {
  width: 100%;
  border-bottom: 1px solid #ccc;
  padding-bottom: 15px;
  margin-bottom: 5px;
}

.grid p {
  font: 12px/18px Arial, Helvetica, "sans-serif";
  color: #333;
  margin: 0;
}

@media (min-width: 560px) {
  .grid {
    width: calc(33% - 30px);
  }
}

@media (min-width: 800px) {
  .grid {
    width: calc(25% - 40px);
  }
}

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

<div id="category">
  <h2>Gallery</h2>
  <ul>
    <li class="category_item" id="all">All</li>
    <li class="category_item" id="cup">Cups</li>
    <li class="category_item" id="seasonal">Seasonal</li>
    <li class="category_item" id="clothing">Clothing and Accesories</li>
    <li class="category_item" id="misc">Misc</li>
  </ul>
</div>

<div class="gallery_item_wrapper">
  <div id="columns">
    <div class="grid cup">
      <img src="images/cups/cup1.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup2.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup seasonal">
      <img src="images/cups/cup3.jpg" class="gallery_item cup seasonal">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup4.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup5.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup6.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup7.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup9.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup10.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup11.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup13.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup14.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup15.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup16.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup17.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup18.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup19.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup20.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup21.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup22.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup23.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid cup">
      <img src="images/cups/cup24.jpg" class="gallery_item cup">
      <p>Something Cup</p>
    </div>

    <div class="grid seasonal">
      <img src="images/items/a4.jpg" class="gallery_item seasonal">
      <p>Something Cup</p>
    </div>

    <div class="grid seasonal">
      <img src="images/items/a3.jpg" class="gallery_item seasonal">
      <p>Something Cup</p>
    </div>

    <div class="grid seasonal">
      <img src="images/items/a22.jpg" class="gallery_item seasonal">
      <p>Something Cup</p>
    </div>

    <div class="grid seasonal">
      <img src="images/items/a23.jpg" class="gallery_item seasonal">
      <p>Something Cup</p>
    </div>

    <div class="grid seasonal">
      <img src="images/items/a24.jpg" class="gallery_item seasonal">
      <p>Something Cup</p>
    </div>
  </div>
</div>

$(document).ready(function(){
  $('.category_item').click(function(){
    var category = $(this).attr('id');

    if(category == 'all'){
      $('.grid').addClass('hide');
      setTimeout(function(){
        $('.grid').removeClass('hide');
      }, 300);
    } else {
      $('.grid').addClass('hide');
      setTimeout(function(){
        $('.' + category).removeClass('hide');
      }, 300);
    }

    if(category == 'all'){
      $('.gallery_item').addClass('hide');
      setTimeout(function(){
        $('.gallery_item').removeClass('hide');
      }, 300);
    } else {
      $('.gallery_item').addClass('hide');
      setTimeout(function(){
        $('.' + category).removeClass('hide');
      }, 300);
    }

  });
});

/* Gallery */
#gallery_wrapper {
  width: 800px;
  margin: 12px 50px 12px 50px;
  background-color: #fff;
  text-align: center;
  border-radius: 12px;
}

#category {
  margin: 40px 0px 20px 0;
}

#category h2 {
  padding-top: 22px;
  margin-bottom: 12px;
}

#category h2 {
  display: grid;
  align-items: center;
  text-align: center;
  grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
  grid-gap: 20px;
}

#category h2::before {
  content: '';
  margin-left: 24px;
  border-top: 1px solid;
}

#category h2::after {
  content: '';
  margin-right: 24px;
  border-top: 1px solid;
}

#category ul li {
  display: inline;
  list-style-type: none;
}

.category_item {
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  margin: 0 40px 0 0;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

.hide {
  transform: scale(0);
  width: 0;
  padding: 0;
  transition: all 250ms ease-in-out;
}

/* Gallery items (pictures, columns, etc.) */
#gallery_item_wrapper {
  width: 90%;
  max-width: 800px;
  min-width: 400px;
  margin: 50px auto;
}

#columns {
  padding: 0 15px 0 15px;
  -webkit-column-count: 2;
  -webkit-column-gap: 10px;
  -webkit-column-fill: auto;
  -moz-column-count: 2;
  -moz-column-gap: 10px;
  -moz-column-fill: auto;
  column-count: 2;
  column-gap: 15px;
  column-fill: auto;
}

.grid {
  display: inline-block;
  background: #fefefe;
  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
  margin: 0 2px 15px;
width: 100%;
box-sizing: border-box;
column-width: 100px;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
  padding: 15px;
  padding-bottom: 5px;
  background: -webkit-linear-gradient(45deg, #fff, #f9f9f9);
  opacity: 1;
  -webkit-transition: all 250ms ease;
  -moz-transition: all 250ms ease;
  transition: all 250ms ease;
}

.grid img {
  width: 100%;
  border-bottom: 1px solid #ccc;
  padding-bottom: 15px;
  margin-bottom: 5px;
}

.grid p {
  font: 12px/18px Arial, Helvetica, "sans-serif";
  color: #333;
  margin: 0;
}

@media (min-width: 560px) {
	#columns {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;}
}

@media (min-width: 800px) {
	#columns {
		-webkit-column-count: 4;
		-moz-column-count: 4;
		column-count: 4;}
}

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

<div id="category">
    <h2>Gallery</h2>
    <ul>
        <li class="category_item" id="all">All</li>
        <li class="category_item" id="cup">Cups</li>
        <li class="category_item" id="seasonal">Seasonal</li>
        <li class="category_item" id="clothing">Clothing and Accesories</li>
        <li class="category_item" id="misc">Misc</li>
    </ul>
</div>

<div class="gallery_item_wrapper">
    <div id="columns">
        <div class="grid cup">
            <img src="images/cups/cup1.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup2.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup seasonal">
            <img src="images/cups/cup3.jpg" class="gallery_item cup seasonal">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup4.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup5.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup6.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup7.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup9.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup10.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup11.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup13.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup14.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup15.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup16.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup17.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup18.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup19.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup20.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup21.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup22.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup23.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid cup">
            <img src="images/cups/cup24.jpg" class="gallery_item cup">
            <p>Something Cup</p>
        </div>

        <div class="grid seasonal">
            <img src="images/items/a4.jpg" class="gallery_item seasonal">
            <p>Something Cup</p>
        </div>

        <div class="grid seasonal">
            <img src="images/items/a3.jpg" class="gallery_item seasonal">
            <p>Something Cup</p>
        </div>

        <div class="grid seasonal">
            <img src="images/items/a22.jpg" class="gallery_item seasonal">
            <p>Something Cup</p>
        </div>

        <div class="grid seasonal">
            <img src="images/items/a23.jpg" class="gallery_item seasonal">
            <p>Something Cup</p>
        </div>

        <div class="grid seasonal">
            <img src="images/items/a24.jpg" class="gallery_item seasonal">
            <p>Something Cup</p>
        </div>
    </div>
</div>

关于javascript - 我如何摆脱这个多余的空间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53337683/