Javascript 砖石图片重叠且未正确内联

我有以下Css、Javascript和Html：

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

JS:

HTML:

正如您所看到的，图像相互重叠，而不是正确地内联

---

谁能告诉我我做错了什么吗？

您只需要使用更大的网格项类，.grid item--width2（我无法加载砖石，但html会告诉您我的意思）：

//初始化
变量$grid=$（'.grid'）。砌体({
//将itemSelector设置为如此。布局中未使用网格大小设置器
itemSelector:“.grid项”，
//使用元素作为选项
columnWidth:“.grid sizer”，
位置：正确
});
//在每个图像加载后布局砌体
$grid.imagesLoaded（）.progress（函数（））{
$grid.mashine（“布局”）；
});
/*流体5柱*/
.grid sizer，
.grid项{宽度：20%；}
/*2列*/
.grid项--width2{width:40%；}
他们只使用Css布局：

HTML:

链接或jsfiddle怎么样？
    // 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');
});

<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>

<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>

#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;
    }
}