Масонство: Изображения, перекрывающиеся друг над другом

Я новичок в JS. Я хотел бы добиться именно этого эффекта, показывая фотографии: kristianhammerstad.comМасонство: Изображения, перекрывающиеся друг над другом

Я уже использую кирпичную кладку, см. Код: http://codepen.io/Kiks/pen/YWzNjr Изображения будут иметь одинаковую ширину, но различную высоту. Это единственное правило.

Проблема показана при имитации видео: jmp.sh/mMcu1Bb - как только изображения имеют разную высоту, сетка сломана и изображения расположены друг на друге. Но когда у меня одинаковая высота связанных изображений, сетка в порядке.

Смешно, что проблема, которую вы видите в видео, находится только на моем сайте (Chrome, Safari). Но она хорошо работает в Codepen (после первой загрузки, даже если я изменяю размер окна браузера, всегда хорошо). Вы можете это объяснить? В чем особенность Codepen?

Это точно мой код. Не могли бы вы рассказать мне, что мне не хватает и где? Я просто учусь, пожалуйста, проявляй терпение. Спасибо

/* Masonry magic */ 

.container { width: 96% !important; margin: 0 auto; } 

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 

#masonry { margin: 0 auto; width: 100%; position: relative; /*z-index:2001;*/ } 

.item { 
    width: 460px; height: auto; background: invisible;  
    margin: 0 auto 20px auto; 
    /*float: left;*/ 
} 

.card-text { 
    width: 460px; 
    padding-right: 40px; 
} 

/* End of Masonry magic */ 

body { padding-top: 60px; } 

.clearfix:before, 
.clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } 
.clearfix:after { clear: both; } 

.lead { 
    font-weight: 400; 
    font-size: 24px; 
    line-height: 1.6; 
    color: #444444; 
    margin-bottom: 40px; 
} 

.text { 
    text-align: left; 
    font-size: 18px; 
    line-height: 1.7; 
    color: #444444; 
} 

p { 
    margin-bottom: 20px; 
}

<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title>Image Showcase Bootstrap</title> 

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

    <!-- Own styles --> 
    <link href="css/style.css" rel="stylesheet"> 

    </head> 

    <body> 
    <div class="container"> 

<!--  <div id="masonry"> 
     <div class="item"><img src="http://placehold.it/460x500"></div> 
     <div class="item"><img src="http://placehold.it/460x500"></div> 
     <div class="item"><img src="http://placehold.it/460x500"></div> 
     <div class="item"><img src="http://placehold.it/460x500"></div> 
     <div class="item"><img src="http://placehold.it/460x500"></div> 
     <div class="item"><img src="http://placehold.it/460x500"></div> 
     <div class="item"><img src="http://placehold.it/460x500"></div> 
     <div class="item"><img src="http://placehold.it/460x500"></div> 
    </div> --> 

    <div id="masonry"> 
     <div class="item"><img src="http://placehold.it/460x500"></div> 
     <div class="item"><img src="http://placehold.it/460x800"></div> 
     <div class="item"><img src="http://placehold.it/460x600"></div> 
     <div class="item"><img src="http://placehold.it/460x460"></div> 
     <div class="item"><img src="http://placehold.it/460x300"></div> 
     <div class="item"><img src="http://placehold.it/460x400"></div> 
     <div class="item"><img src="http://placehold.it/460x200"></div> 
     <div class="item"><img src="http://placehold.it/460x500"></div> 
    </div> 

    </div><!-- /.container --> 


    <!-- Bootstrap core JavaScript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="js/vendor/jquery.min.js"><\/script>')</script> 
    <script src="js/bootstrap.min.js"></script> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.0/masonry.pkgd.min.js"></script> 
    <script> 
     var container = document.querySelector('#masonry'); 
     var msnry = new Masonry(container, { 
     columnWidth: 460, 
     gutter: 20, 
     isFitWidth: true, 
     itemSelector: '.item' 
     }); 
    </script> 

    </body> 
</html>

источник

2016-05-28 Kiks

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

Рабочий код: http://codepen.io/Kiks/pen/oLNBrG

$('#masonry').imagesLoaded(function() { 
      $('#masonry').masonry({ 
       itemSelector : '.item', 
       columnWidth : 460, 
       isAnimated: true, 
       gutter: 20, 
       isFitWidth: true, 
       animationOptions: { 
        duration: 700, 
        easing: 'linear', 
        queue: false 
       } 
      }); 
     });

Хотя, есть еще маленькая проблема. Посмотрите, как вы можете увидеть только один столбец до создания правильной сетки: http://jmp.sh/5wqeF4Q (я обновляю страницу дважды)

Любые идеи о том, как получить красивую сетку сразу?

источник

2016-05-28 15:07:54 Kiks

Масонство: Изображения, перекрывающиеся друг над другом

ответ

Смежные вопросы