Кладка картины наложения и не встраивать правильно

Question

У меня есть следующие CSS, JavaScript и HTML:

/* fluid 5 columns */ 
.grid-sizer, 
.grid-item { 
    width: 20%; 
} 
/* 2 columns */ 
.grid-item--width2 { 
    width: 40%; 
} 

JS:

// init Masonry 
var $grid = $('.grid').masonry({ 
    // set itemSelector so .grid-sizer is not used in layout 
    itemSelector: '.grid-item', 
    // use element for option 
    columnWidth: '.grid-sizer', 
    percentPosition: true 
}); 
// layout Masonry after each image loads 
$grid.imagesLoaded().progress(function() { 
    $grid.masonry('layout'); 
}); 

HTML:

<div class="grid"> 
<!-- width of .grid-sizer used for columnWidth --> 
<div class="grid-sizer"></div> 
<div class="grid-item"> 
    <img src="img/frontpage/girl.jpg"alt="recent project"> 
</div> 
<div class="grid-item"> 
    <img src="img/frontpage/mid.png"> 
</div> 

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

Может ли кто-нибудь сказать мне, что я сделал неправильно?

Answer 1

Вам просто нужно использовать больше сетки класс элементов, .grid-вещь - ширина2 (я не могу загрузить кладку но HTML покажет вам, что я имею в виду):

// init Masonry 
 
var $grid = $('.grid').masonry({ 
 
    // set itemSelector so .grid-sizer is not used in layout 
 
    itemSelector: '.grid-item', 
 
    // use element for option 
 
    columnWidth: '.grid-sizer', 
 
    percentPosition: true 
 
}); 
 
// layout Masonry after each image loads 
 
$grid.imagesLoaded().progress(function() { 
 
    $grid.masonry('layout'); 
 
});

/* fluid 5 columns */ 
 
.grid-sizer, 
 
.grid-item { width: 20%; } 
 
/* 2 columns */ 
 
.grid-item--width2 { width: 40%; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.min.js"></script> 
 

 
<div class="grid"> 
 
<!-- width of .grid-sizer used for columnWidth --> 
 
<div class="grid-sizer"></div> 
 
<div class="grid-item"> 
 
    <img src="http://placehold.it/200x200"alt="recent project"> 
 
</div> 
 
<div class="grid-item--width2"> 
 
    <img src="http://placehold.it/400x400"> 
 
</div>

Answer 2

Эй использовать это только Css расположение:

HTML:

<div id="wrapper"> 
    <div id="columns"> 
     <div class="pin"> 
      <img src="http://www.strangenotions.com/wp-content/uploads/nature_clouds_heaven_019281_.jpeg" class="img-responsive" /> 
      <h3 class="extra-bold"> 
       <a href="#">Heaven 1 - Lorem ipsum dolor s </a> 
      </h3> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      </p> 
      <br> 

      <div class="vertical-space-sm"></div> 
     </div> 
     <div class="pin"> 
      <img src="http://2.everystudent.com/pics4/heaven2.jpg" class="img-responsive" /> 
      <h3 class="extra-bold"> 
       <a href="#">Heaven 2 - dolor sit amet, consectetur adipisicing elit</a> 
      </h3> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      </p> 
      <br> 

      <div class="vertical-space-sm"></div> 
     </div> 
     <div class="pin"> 
      <img src="http://llerrah.com/images5/heavensgrocerystoretop.jpg" class="img-responsive" /> 
      <h3 class="extra-bold"> 
       <a href="#">Heaven 3 - nt ut labore et dolore magna aliqua. Ut </a> 
      </h3> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      </p> 
      <br> 

      <div class="vertical-space-sm"></div> 
     </div> 
     <div class="pin"> 
      <img src="http://www.camerondobbins.org/wp-content/uploads/2015/06/heaven.jpg" class="img-responsive" /> 
      <h3 class="extra-bold"> 
       <a href="#">Heaven 4 - nt ut labore et dolore magna aliqua & nt ut labore et dolore magna aliqua</a> 
      </h3> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      </p> 
      <br> 

      <div class="vertical-space-sm"></div> 
     </div> 
     <div class="pin"> 
      <img src="http://www.strangenotions.com/wp-content/uploads/nature_clouds_heaven_019281_.jpeg" class="img-responsive" /> 
      <h3 class="extra-bold"> 
       <a href="#">Heaven 1 - Lorem ipsum dolor s </a> 
      </h3> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      </p> 
      <br> 

      <div class="vertical-space-sm"></div> 
     </div> 
     <div class="pin"> 
      <img src="http://2.everystudent.com/pics4/heaven2.jpg" class="img-responsive" /> 
      <h3 class="extra-bold"> 
       <a href="#">Heaven 2 - dolor sit amet, consectetur adipisicing elit</a> 
      </h3> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      </p> 
      <br> 

      <div class="vertical-space-sm"></div> 
     </div> 
     <div class="pin"> 
      <img src="http://llerrah.com/images5/heavensgrocerystoretop.jpg" class="img-responsive" /> 
      <h3 class="extra-bold"> 
       <a href="#">Heaven 3 - nt ut labore et dolore magna aliqua. Ut </a> 
      </h3> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      </p> 
      <br> 

      <div class="vertical-space-sm"></div> 
     </div> 
     <div class="pin"> 
      <img src="http://www.camerondobbins.org/wp-content/uploads/2015/06/heaven.jpg" class="img-responsive" /> 
      <h3 class="extra-bold"> 
       <a href="#">Heaven 4 - nt ut labore et dolore magna aliqua & nt ut labore et dolore magna aliqua</a> 
      </h3> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      </p> 
      <br> 

      <div class="vertical-space-sm"></div> 
     </div> 
     <div class="pin"> 
      <img src="http://www.strangenotions.com/wp-content/uploads/nature_clouds_heaven_019281_.jpeg" class="img-responsive" /> 
      <h3 class="extra-bold"> 
       <a href="#">Heaven 1 - Lorem ipsum dolor s </a> 
      </h3> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      </p> 
      <br> 

      <div class="vertical-space-sm"></div> 
     </div> 
     <div class="pin"> 
      <img src="http://2.everystudent.com/pics4/heaven2.jpg" class="img-responsive" /> 
      <h3 class="extra-bold"> 
       <a href="#">Heaven 2 - dolor sit amet, consectetur adipisicing elit</a> 
      </h3> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      </p> 
      <br> 

      <div class="vertical-space-sm"></div> 
     </div> 
     <div class="pin"> 
      <img src="http://llerrah.com/images5/heavensgrocerystoretop.jpg" class="img-responsive" /> 
      <h3 class="extra-bold"> 
       <a href="#">Heaven 3 - nt ut labore et dolore magna aliqua. Ut </a> 
      </h3> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      </p> 
      <br> 

      <div class="vertical-space-sm"></div> 
     </div> 
     <div class="pin"> 
      <img src="http://www.camerondobbins.org/wp-content/uploads/2015/06/heaven.jpg" class="img-responsive" /> 
      <h3 class="extra-bold"> 
       <a href="#">Heaven 4 - nt ut labore et dolore magna aliqua & nt ut labore et dolore magna aliqua</a> 
      </h3> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      </p> 
      <br> 

      <div class="vertical-space-sm"></div> 
     </div> 
    </div> 
</div> 

CSS:

#wrapper { 
    width: 100%; 
    margin: 50px auto; 
} 

#columns { 
    -webkit-column-count: 12; 
    -webkit-column-gap: 20px; 
    -webkit-column-fill: auto; 
    -moz-column-count: 12; 
    -moz-column-gap: 20px; 
    -moz-column-fill: auto; 
    column-count: 12; 
    column-gap: 20px; 
    column-fill: auto; 
} 
@media (max-width: 965px) { 
    #columns { 
    -webkit-column-count: 4; 

    -moz-column-count: 4; 

    column-count: 4; 

    } 
} 
@media (max-width: 768px) { 
    #columns { 
    -webkit-column-count: 2; 

    -moz-column-count: 2; 

    column-count: 2; 

    } 
} 
@media (max-width: 500px) { 
    #columns { 
    -webkit-column-count: 1; 

    -moz-column-count: 1; 

    column-count: 1; 

    } 
} 
.pin { 
    float: left; 
    display: inline-block; 
    background: #FEFEFE; 
    border: 2px solid #FAFAFA; 
    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 .2s ease; 
    -moz-transition: all .2s ease; 
    -o-transition: all .2s ease; 
    transition: all .2s ease; 
} 

.pin img { 
    width: 100%; 
} 

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

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

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