html - 使用复选框过滤图像后，如何将图像放置在砌体布局的同一行中？

Question

我正在用 laravel 构建一个项目。布局与 Pinterest 布局（也称为砌体）非常相似，它显示了不同类型的房间：

布局的实现方式是图像按水平顺序放置。为此，我遵循了本教程。

这是布局的代码：

HTML：

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
    <div class="grid products-by-room" data-masonry='{ "itemSelector": ".grid-item"}' style="margin-top: 8rem">
        @foreach ($rooms as $room)
           <div class="grid-item" data-category="{{ $room->data_category}}" style="border: 7px solid #fff">
               <a href="#zoomImg{{ $room->id }}" data-bs-toggle="modal" data-bs-target="#zoomImg{{ $room->id }}">
                   <div class="img-wrapper">
                       <img src="{{ $room->img }}" alt="" class="img-fluid shade">
                           <div class="overlay">
                           <i class="fa fa-search-plus icon"></i>
                       </div>
                   </div>
               </a>
               <div class="text-left mt-3 mb-5">
                   <p class="product-subtitle">{{ $room->name }}</p>
                   <h4 class="product-title">Shop the Look</h4>
                   <a class="product-price-link" href="#getPriceByRoom{{ $room->id }}" data-bs-toggle="modal" data-bs-target="#getPriceByRoom{{ $room->id }}">get price</a>
               </div>
           </div>
       @endforeach
    </div>

CSS：

  .grid-item img {
    width: 100%;
    font-size: 0;
  }

  .grid-item {
    width: 100%;
  }

  @media (min-width: 768px) {
    .grid-item {
      width: 33.333%;
    }
  }

我创建了一个过滤器，只显示选中的房间，但它没有按我的预期工作。它确实正确过滤了房间，但在它们周围留下了很多空白空间。

这是过滤器：

HTML：

<div class="modal-backdrop-filters"></div>
        <div id="mySidenav" class="sidenav">
            <div class="top-header-filters">
                <h3 class="title-filters">FILTERS</h3>
                <a id="closebtn" class="closebtn filter-close-btn">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                    style="border: none; background-color: #fff;">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </a>
            </div>
            <div class="header-filters">
                <h4 class="title-filters">Categories</h4>
            </div>
            <div class="round" id="r-group">
                <form>
                    <label class="label-filter" style="margin-top: 3rem;"><input type="checkbox" name="room" value="office"><span class="label-text"> Office</span></label><br>
                    <label class="label-filter"><input type="checkbox" name="room" value="bedroom"/><span class="label-text">Bedroom</span></label><br>
                    <label class="label-filter"><input type="checkbox" name="room" value="living-room"/><span class="label-text">Living Room</span></label><br>
                    <label class="label-filter"><input type="checkbox" name="room" value="dining-room"/><span class="label-text">Dining Room</span></label><br>
                    <label class="label-filter"><input type="checkbox" name="room" value="library"/><span class="label-text">Library</span></label><br>
                    <label class="label-filter"><input type="checkbox" name="room" value="hallway"/><span class="label-text">Hallway</span></label><br>
                    <label class="label-filter"><input type="checkbox" name="room" value="kitchen"/><span class="label-text">Kitchen</span></label><br>
                    <label class="label-filter"><input type="checkbox" name="room" value="bar"/><span class="label-text">Bar</span></label><br>
                    <label class="label-filter"><input type="checkbox" name="room" value="entryway"/><span class="label-text">Entryway</span></label><br>
                </form>
              </div>
            <button id="applyBtn" class="apply-filters-btn">APPLY</button>
        </div>
    </div>

脚本：

$(function(){
        $('form').find("input").on('change',function(){
            let selected = [];
            $('form').find("input").each(function(){
                if(jQuery(this).is(":checked")){
                selected.push(jQuery(this).val());
                }
            })
            if(!selected.length){
            $(".products-by-room > div").show();
            return;

            }
            $(".products-by-room > div").hide();
            $(".products-by-room > div").each(function(){
                const category = jQuery(this).attr('data-category');
                const categorySplitted = category.split(' ');
                categorySplitted.forEach((cat)=>{
                if(selected.indexOf(cat) !== -1){
                jQuery(this).show();
                }
                });
            });
        });
    });

问题是，当我选择一个房间（例如“餐厅”）时，这是我得到的结果，图像显示在它们的原始位置，并且它们周围有很多空白：

这是我想要的结果，所有餐厅都在同一排，周围没有空间：

有没有办法可以做到这一点？提前致谢！

标签： htmlcsslaravelmasonrypinterest