jquery - 固定宽度的标题和带有同位素/砌体的流体图像

Question

我在页面上有一个固定宽度的标题和大量图像。我想让它们与屏幕截图中显示的一样。

图像宽度可变，最大可达 200 像素。我尝试了以下代码，但它不起作用。图片与标题重叠，图片之间有一个小空间。

$(function() {
        $('.grid').isotope({
            itemSelector: '.item',
            percentPosition: true,
            masonry: {
                columnWidth: ''
            }
        });
    });

.container {
        width: 1024px;
        margin: 0 auto;
    }
    body {
        margin: 0;
    }
    .header {
        width: 300px;
        height: 40px;
        background-color: #0fa3c3;
        float: left;
    }
    .item {
        width: 20%;
        float: left;
    }

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<div class="container">
        <div class="grid">
            <div class="header"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
        </div>
    </div>

Answer 1

试试这个..我也给了标题绝对位置..和 2 的 z-index，现在试试吧。

$(function() {
        $('.grid').isotope({
            itemSelector: '.item',
            percentPosition: true,
            masonry: {
                columnWidth: ''
            }
        });
    });

.container {
        //width: 1024px;
        //margin: 0 auto;
    }
    body {
        margin: 0;
    }
    .header {
        width: 300px;
        height: 40px;
        background-color: #0fa3c3;
        float: left;
        position: absolute;
        z-index: 2;
    }
    .item {
        width: 20%;
        float: left;
    }

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<div class="container">
        <div class="grid">
            <div class="header"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
        </div>
    </div>