Why do there appear padding between images when using masonry?

M

mlarisa2017-09-14 22:07:38

Software testing

mlarisa, 2017-09-14 22:07:38

I use masonry and imagesloaded. An example was taken from the Internet. The next screenshot shows that everything is working.

But if you change the images to your own, indents appear. Moreover, if you open the developer panel in the browser or change the width of the window, then the indents disappear.

Please help me solve this problem.

<!DOCTYPE html>
<html>

<head>
  <title>Gallery masonry</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
  <script src="js/imageloaded.js"></script>
  <script src="js/common.js"></script>
</head>

<body>
  <div id="gallery">
    <div class="item-masonry">
      <img src="img/img1.jpg" alt="">

    </div>
    <div class="item-masonry">
      <img src="img/img2.jpg" alt="">

    </div>
    <div class="item-masonry">
      <img src="img/img3.jpg" alt="">

    </div>
    <div class="item-masonry">
      <img src="img/img4.jpg" alt="">

    </div>
    <div class="item-masonry">
      <img src="img/img5.jpg" alt="">

    </div>
    <div class="item-masonry">
      <img src="img/img6.jpg" alt="">

    </div>
    <div class="item-masonry">
      <img src="img/img7.jpg" alt="">

    </div>
    <div class="item-masonry">
      <img src="img/img8.jpg" alt="">

    </div>
    <div class="item-masonry">
      <img src="img/img9.jpg" alt="">

    </div>
    <div class="item-masonry">
      <img src="img/img10.jpg" alt="">

    </div>
    <div class="item-masonry">
      <img src="img/img11.jpg" alt="">

    </div>
    <div class="item-masonry">
      <img src="img/img12.jpg" alt="">

    </div>
  </div>

</body>

</html>

body {
  padding: 0;
  margin: 0;
}

.item-masonry {
  width: 25%;
}

.item-masonry img {
  width: 100%;
  height: auto;
  display: block;
}

$(document).ready(function() {

  var container = $('#gallery');

  container.imagesLoaded(function() {
    container.masonry({
      itemSelector: '.item-masonry',
      columnWidth: '.item-masonry',
      percentPosition: true
    });
  });
});

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

S

sim3x, 2019-05-29
@sim3x

You should choose between vacancies where you will be accepted and trained
Most often you will need to independently obtain some kind of knowledge
Courses are not aimed at getting you a job - they are aimed at getting money from you
If you need a piece of paper from the courses, just like that, then go through any

A

Alexander Alexandrov, 2017-09-14
@BraveHeart

And what IF to position? float: left;
For example, https://jsfiddle.net/yu3ver/fvxvjv5e/