кладка - показывать изображения в одном столбце, если размер страницы - PullRequest
Новая
       73

кладка - показывать изображения в одном столбце, если размер страницы

0 голосов
/ 03 декабря 2018

В отношении демо здесь: imagesLoadedDemo 

    <div class="grid">
      <div class="grid-sizer"></div>
      <div class="grid-item">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" />
      </div>
      <div class="grid-item">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
      </div>
      <div class="grid-item">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" />
      </div>
      <div class="grid-item">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" />
      </div>
      <div class="grid-item">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" />
      </div>
      <div class="grid-item">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/cat-nose.jpg" />
      </div>
      <div class="grid-item">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/contrail.jpg" />
      </div>
      <div class="grid-item">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/golden-hour.jpg" />
      </div>
      <div class="grid-item">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/flight-formation.jpg" />
      </div>
    </div>

Код CSS: 

    .grid {
      background: #DDD;
    }

    /* clear fix */
    .grid:after {
      content: '';
      display: block;
      clear: both;
    }

    /* ---- .grid-item ---- */

    .grid-sizer,
    .grid-item {
      width: 33.333%;
    }

    .grid-item {
      float: left;
    }

    .grid-item img {
      display: block;
      width: 100%;
    }

, когда я изменяю размер страницы, изображения становятся маленькими и корректируютсясоответственно.Но изображения всегда отображаются в три столбца.

. Чтобы сделать: я хочу, чтобы он отображался в одном столбце, если размер страницы уменьшается до очень маленького макета.

1 Ответ

0 голосов
/ 03 декабря 2018

Отрегулируйте ширину для классов grid-sizer и grid-item, используя медиазапросы на основе размеров экрана.

// external js: masonry.pkgd.js, imagesloaded.pkgd.js

// init Masonry after all images have loaded
var $grid = $('.grid').imagesLoaded( function() {
  $grid.masonry({
    itemSelector: '.grid-item',
    percentPosition: true,
    columnWidth: '.grid-sizer'
  }); 
});
* { box-sizing: border-box; }

/* force scrollbar */
html { overflow-y: scroll; }

body { font-family: sans-serif; }

/* ---- grid ---- */

.grid {
  background: #DDD;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 33.333%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  width: 100%;
}

@media only screen and (max-width: 479px) {
	.grid-sizer, .grid-item { width: 100%; }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.grid-sizer, .grid-item { width: calc(100% / 2); }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
	.grid-sizer, .grid-item { width: calc(100% / 3); }
}
<h1>Masonry - imagesLoaded callback</h1>

<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" />
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" />
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" />
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" />
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/cat-nose.jpg" />
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/contrail.jpg" />
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/golden-hour.jpg" />
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/flight-formation.jpg" />
  </div>
</div>

следуйте по ссылке здесь

...