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-item - width2（我不能加载砌体，但html会告诉你我的意思）：

＆＃13;

// Their version
console.log("The answer makes sense!");

// Your version
console.log("True");

＆＃13;

    // 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');
});

＆＃13;

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

＆＃13;

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

砌体图片叠加并且没有正确内联

2 个答案: