Как сделать сетку с пакетом с изображениями переменного размера и без белых пробелов в конце каждой строки - PullRequest
Новая
       42

Как сделать сетку с пакетом с изображениями переменного размера и без белых пробелов в конце каждой строки

0 голосов
/ 10 апреля 2019

Я хочу создать сетку для фотографий (в настоящее время использующую упаковку, но открытую для предложений о том, что лучше всего использовать), которая занимает всю ширину своего контейнера с изображениями, размер которых неизвестен.Моя проблема заключается в том, что из-за различий в ширине изображения я получаю белые пробелы в конце каждой строки (строки заканчиваются в неровных местах), где новый элемент фото / сетки не помещается.Это также происходит при изменении размера экрана.Любое предложение о том, как заставить эти промежутки исчезнуть / заняться изображениями?

Я не хочу использовать фиксированную ширину столбцов, я пробовал разные варианты, используя фоновые изображения вместо изображений, но изображения были слишком обрезаны.

посмотрите мой пример на кодовой ручке https://codepen.io/hollyb/pen/JVEzYX

HTML ниже 

<div class="home-page-wrap">

        <div class="page-content">

            <div class="grid packery">
                <canvas></canvas>
              <div class="grid-item"><img src="https://picsum.photos/200/300" alt=""></div>
              <div class="grid-item grid-item--width2"><img src="https://picsum.photos/300/300" alt=""></div>
              <div class="grid-item"><img src="https://picsum.photos/400/300" alt=""></div>
              <div class="grid-item"><img src="images/skinnyimage2.jpg" alt=""></div>
              <div class="grid-item grid-item--width2"><img src="https://picsum.photos/300/300" alt=""></div>
              <div class="grid-item"><img src="https://picsum.photos/220/300" alt=""></div>
               <div class="grid-item"><img src="ihttps://picsum.photos/100/300" alt=""></div>
              <div class="grid-item grid-item--width2"><img src="https://picsum.photos/450/300" alt=""></div>
              <div class="grid-item"><img src="https://picsum.photos/600/300" alt=""></div>
              <div class="grid-item"><img src="https://picsum.photos/200/300" alt=""></div>

            </div> <!-- end grid -->

        </div> <!-- end page content -->

    </div> <!-- end page wrap -->


<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/packery@2/dist/packery.pkgd.js"></script>


.home-page-wrap {
  max-width: 1000px;
  margin: auto;
}

.grid-item {
    box-sizing: border-box;
    max-height: 300px;

}

img{
        max-height: 300px;

    }

Я хочу, чтобы обе стороны строк сетки заканчивались одинаковопоместите / на краю изображения предпочтительно с таким же количеством, если между ними будет пробел

1 Ответ

0 голосов
/ 12 июля 2019

Packery применяет свои собственные настройки из вызова JS. Вызов JS в вашем примере устанавливает gutter в 15 (пикселей). Для начала, это должно быть установлено в ноль, чтобы делать то, что вы хотите сделать. Я также рекомендую вам установить percentPosition, так как я думаю, что это то, чего вы пытаетесь достичь.

Вот пример: 

<script type='text/javascript'>
    $('.grid').imagesLoaded( function(){
        $('.grid').packery({
            itemSelector:'.grid-item',
            percentPosition:true,
            gutter:5
        });
    });
</script>

Это должно переопределить любую настройку css grid-item{margin:X;}, которая может у вас быть, хотя было бы разумно установить margin:0;, на всякий случай.

Надеюсь, это поможет вам.

...