砌体荷载问题

Question

我将砖石添加到了bootstrap 4 /角区域，并且对齐一直中断，直到重新缩放页面为止。这在codepen上工作正常，但是由于任何原因它无法正确加载。我可以在下面提供链接和代码。我不知道该如何解决。任何帮助表示赞赏。

HTML

  <div ng-controller="portItemController" class="kcontainer">
    <div class="row nill">
      <div class="itm item col-sm-6 col-md-4 col-lg-2 grip_wrap gonzo" ng-repeat="portItem in portItems">
        <div class="grip_hang_topp"></div>
        <div class="col grip">
          <h3>{{ portItem.name }}</h3>
          <a title="{{ portItem.desc }}" class="fancybox zero" rel="gallery1" href="{{ portItem.img }}">
      <img alt="{{ portItem.desc }}" src="{{ portItem.img }}" />
      </a>
          <div class="col coat2 truncate bleww">{{ portItem.desc }}</div>
        </div>
        <div class="grip_hang_bott"></div>
      </div>
    </div>
  </div>

JS

var portItems = angular.module('portItems', []);
var othItems = angular.module('othItems', []);
var app = angular.module('app', ['portItems', 'othItems']);

portItems.controller('portItemController', function($scope) {
  "use strict";
  $scope.portItems = [{
    id: 7,
    name: 'Laurel',
    year: '2018',
    type: 'dpainting',
    img: 'https://scontent.cdninstagram.com/vp/d57b67930605619d9915721c0c7485ca/5B9FE8A0/t51.2885-15/s640x640/sh0.08/e35/32039833_2132442723659121_1042097789158293504_n.jpg',
    program: 'Procreate',
    desc: 'Laurel Digital Painting'
  }, {
    id: 1,
    name: 'Galaxy Storyboard',
    year: '2015',
    type: 'mmedia',
    img: 'http://galnova.com/A15/storyb_1.jpg',
    program: 'adobe after effects',
    desc: 'Galaxy Supernova intro storyboard'
  }, {
    id: 2,
    name: 'Sketchage Storyboard',
    year: '2015',
    type: 'mmedia',
    img: 'http://galnova.com/A15\/storyb_2.jpg',
    program: 'adobe after effects',
    desc: 'Sketchage intro storyboard.'
  }, {
    id: 3,
    name: 'Knowledge Pass',
    year: '2011',
    type: 'gdesign',
    img: 'http://galnova.com/A11/pass.jpg',
    program: 'adobe illustrator',
    desc: 'Poster design for graduate school'
  }, {
    id: 10,
    name: 'Dark V. Moon',
    year: '2018',
    type: 'character',
    img: 'https://scontent-ort2-2.cdninstagram.com/vp/0233a1fc37a1558108aac9ef137296f9/5BBE415A/t51.2885-15/e35/30078872_466018893814056_5663022758980747264_n.jpg',
    program: 'Procreate',
    desc: 'Chalstolce Macabre V. Bruno Moon'
  }, {
    id: 4,
    name: 'Rand Poster 1',
    year: '2013',
    type: 'gdesign',
    img: 'http://galnova.com/nu_images/gd_42.jpg',
    program: 'adobe illustrator',
    desc: 'Poster design for graduate school'
  }, {
    id: 5,
    name: 'Rand Poster 2',
    year: '2013',
    type: 'gdesign',
    img: 'http://galnova.com/nu_images/gd_43.jpg',
    program: 'adobe illustrator',
    desc: 'Poster design for graduate school'
  }, {
    id: 8,
    name: 'Nail',
    year: '2018',
    type: 'character',
    img: 'https://scontent-ort2-2.cdninstagram.com/vp/1925353a4d07218677bef425f84bbc6c/5BC2A313/t51.2885-15/s640x640/sh0.08/e35/27581420_188328278566573_6135180178961203200_n.jpg',
    program: 'Sketchbook Pro',
    desc: 'Nail Abaddon - The Wing Collector'
  }, {
    id: 6,
    name: 'Rand Poster 3',
    year: '2013',
    type: 'gdesign',
    img: 'http://galnova.com/nu_images\/gd_44.jpg',
    program: 'adobe illustrator',
    desc: 'Poster design for graduate school'
  }, {
    id: 8,
    name: 'Lem',
    year: '2018',
    type: 'character',
    img: 'https://scontent-ort2-2.cdninstagram.com/vp/cfb3e95475805349903e98c9e396563f/5BBD86F4/t51.2885-15/e35/29417246_590889954611980_5917973031283589120_n.jpg',
    program: 'Procreate',
    desc: 'The Houselord Lem'
  }, {
    id: 77,
    name: 'Rand Poster 4',
    year: '2013',
    type: 'gdesign',
    img: 'http://galnova.com/nu_images/gd_45.jpg',
    program: 'Adobe illustrator',
    desc: 'Poster design for graduate school'
  }, {
    id: 08,
    name: 'Beyonce',
    year: '2018',
    type: 'dpainting',
    img: 'https://scontent.cdninstagram.com/vp/a2c91bb923b102c9da9fec2a13be146c/5BB474A2/t51.2885-15/s640x640/sh0.08/e35/34685418_1949404505093454_1988203583236997120_n.jpg',
    link: '',
    program: 'Procreate',
    desc: 'Beyonce Digital Painting'
  }, {
    id: 90,
    name: 'Sideshow',
    year: '2017',
    type: 'character',
    img: 'https://scontent-ort2-2.cdninstagram.com/vp/1c834b33e18cb78418505554cf23a630/5BB74875/t51.2885-15/e35/29403757_224304941459986_3331194033690116096_n.jpg',
    program: 'Sketchbook Pro',
    desc: 'Villian in Events Planning Committee'
  }, {
    id: 09,
    name: 'Gale',
    year: '2018',
    type: 'dpainting',
    img: 'https://scontent.cdninstagram.com/vp/a07e3754846aeb964c2132b93e745863/5BBCCEE8/t51.2885-15/s640x640/sh0.08/e35/33682561_243431413077952_6158606901983576064_n.jpg',
    program: 'Procreate',
    desc: 'Gale Digital Painting'
  }, {
    id: 10,
    name: 'LOTCT Poster',
    year: '2018',
    type: 'character',
    img: 'https://scontent.cdninstagram.com/vp/8bfbb30f78efe886f0b274cd0e82333a/5BB89F63/t51.2885-15/s640x640/sh0.08/e35/32841311_1687982284656331_7181764718590164992_n.jpg',
    program: 'Procreate',
    desc: 'Legend of the Cursed Twelve Poster'
  }];
});

// masonry

 $(function() {
"use strict";
  $('.kcontainer').masonry({
    itemSelector: '.item',
    columnWidth: 0
  });


});

JS FIDDLE https://jsfiddle.net/galnova/zv2gcaq6/3/

LINK http://galnova.com/portfolio/