CSS3 column方法响应式多列砖块布局

MODERNIZR ENABLED modernizr is used to check browser capability against css columns. If it isn't supported, the browser will show up a fallback with "text-align: justify" and "display: inline-block;" 参考源： https://github.com/doptrois/SASSMasonryMixin

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1575
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/****************************************************\
  Unnesessary UI styles..
  Scroll down to see the mixin.
\****************************************************/

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,600);
@import url(http://fonts.googleapis.com/css?family=Inconsolata);
body {
    background-color: #5b5049;
    font-family: 'Open Sans', Arial, serif;
    font-weight: 300;
    color: white;
    padding-bottom: 1rem;
    padding-top: 2rem;
}
a {
    color: white;
}
a:hover {
    color: white;
    text-decoration: none;
}
h1 {
    font-family: "Open Sans Condensed";
    font-size: 3rem;
    font-weight: 700;
    line-height: 1em;
    padding-bottom: 1.2rem;
}
h1 small {
    font-family: "Open Sans";
}
h2 {
    color: #474843;
    text-transform: uppercase;
    font-family: "Open Sans Condensed";
    font-weight: 700;
    font-size: 1.2rem;
    text-align: center;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
    padding: 0.5em;
    margin-top: 0;
    background: #b3beb1;
}
.wrapper {
    margin: 0 auto;
    width: 80%;
}
hr {
    border-bottom: 1px solid #b3beb1;
    margin: 2rem 0 2.5rem;
    clear: both;
}
.content {
    background: #f7ecd3;
    padding: 0 0 0.5rem;
    margin-bottom: 2rem;
    border-top: 1px solid white;
    border-radius: 10px;
    box-shadow: 0px 4px 0px #c7beaa;
    overflow: hidden;
    color: black;
}
.details {
    float: left;
    width: 45%;
}
.howto {
    float: right;
    width: 50%;
    margin-top: 0.7rem;
}
.howto >:not(h2) {
    padding-left: 1rem;
    padding-right: 1em;
}
code {
    font-family: Inconsolata;
    font-weight: normal;
}
abbr {
    cursor: help;
}
h1,
h2,
h3 {
    margin: 0;
}
.box-1 .content {
    padding-bottom: 9em;
}
.box-2 .content {
    padding-bottom: 15em;
}
.box-3 .content {
    padding-bottom: 1.5em;
}
.box-4 .content {
    padding-bottom: 3em;
}
.box-5 .content {
    padding-bottom: 7.5em;
}
.box-6 .content {
    padding-bottom: 9em;
}
.box-7 .content {
    padding-bottom: 15em;
}
.box-8 .content {
    padding-bottom: 15em;
}
.box-9 .content {
    padding-bottom: 12em;
}
.box-10 .content {
    padding-bottom: 12em;
}
.box-11 .content {
    padding-bottom: 15em;
}
.box-12 .content {
    padding-bottom: 4.5em;
}
.box-13 .content {
    padding-bottom: 4.5em;
}
.box-14 .content {
    padding-bottom: 15em;
}
.box-15 .content {
    padding-bottom: 3em;
}
.box-16 .content {
    padding-bottom: 10.5em;
}
.box-17 .content {
    padding-bottom: 1.5em;
}
.box-18 .content {
    padding-bottom: 7.5em;
}
.box-19 .content {
    padding-bottom: 7.5em;
}
.box-20 .content {
    padding-bottom: 6em;
}
.box-21 .content {
    padding-bottom: 7.5em;
}
.box-22 .content {
    padding-bottom: 9em;
}
.box-23 .content {
    padding-bottom: 4.5em;
}
.box-24 .content {
    padding-bottom: 10.5em;
}
.box-25 .content {
    padding-bottom: 10.5em;
    /****************************************************\
  Sass Masonry Mixin
\****************************************************/
    /*********************************************\
  Include Masonry
\*********************************************/
}
.masonry {
    text-align: justify;
    font-size: 0;
}
.masonry:after {
    content: '';
    display: inline-block;
    width: 100%;
}
.masonry > * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 16px;
    font-size: 1rem;
    vertical-align: top;
    display: inline-block;
    width: 32%;
}
.csscolumns .masonry {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
    margin-left: -1%;
    margin-right: -1%;
}
.csscolumns .masonry:after {
    content: none;
}
.csscolumns .masonry > * {
    padding-left: 2.94118%;
    padding-right: 2.94118%;
    width: 100%;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    column-break-inside: avoid;
    break-inside: avoid;
}

HTML

<main class='wrapper'>
    <div class='details'>
        <h1>CSS Only Sass Masonry Mixin</h1>
        <h3>Supports gap indication in</h3>
        <ul>
            <li>
                <code>Pixels</code>
            </li>
            <li>
                <code>Rems</code>
            </li>
            <li>
                <code>Percentages*</code>
            </li>
        </ul>
        <p>*Percent gaps are <a href="https://www.w3.org/TR/css3-multicol/#column-gap0" target="_blank" title="Open W3C's specification">not supported by css columns</a> e.g. <code>columns-gap: 3%</code>.
            <br>The mixin will simulate that behaviour for you.</p>
        <p>
            <strong>
        Some mixins used from
        <a href='https://bourbon.io' target='_blank'>bourbon.io</a>
      </strong>
        </p>
        <p>
            <strong>View project on <a href="https://github.com/doptrois/SASSMasonryMixin" target="_blank">github</a></strong>
        </p>
    </div>
    <div class='content howto'>
        <h2>How to</h2>
        <pre><code>your-masonry-container {&#x000A;    @include masonry(<abbr title="Total amount of columns">3</abbr>, <abbr title="Column gap in pixels, rems or percentages">2%</abbr>, "<abbr title="Selector for the direct child elements inside your-masonry-container">> *</abbr>");&#x000A;}</code></pre>
        <p>Each variable is optional. Defaults are shown above.</p>
        <h2>Note</h2>
        <p>If you use percentages for columns gaps, it's recommended to not style the direct child elements of <code>your-masonry-container </code> and wrap the content inside with an additional element and style <em>these</em> elements like in this example.</p>
    </div>
    <hr>
    <div class='masonry'>
        <article class='box box-1'>
            <div class='content'>
                <h2>Content 1</h2>
            </div>
        </article>
        <article class='box box-2'>
            <div class='content'>
                <h2>Content 2</h2>
            </div>
        </article>
        <article class='box box-3'>
            <div class='content'>
                <h2>Content 3</h2>
            </div>
        </article>
        <article class='box box-4'>
            <div class='content'>
                <h2>Content 4</h2>
            </div>
        </article>
        <article class='box box-5'>
            <div class='content'>
                <h2>Content 5</h2>
            </div>
        </article>
        <article class='box box-6'>
            <div class='content'>
                <h2>Content 6</h2>
            </div>
        </article>
        <article class='box box-7'>
            <div class='content'>
                <h2>Content 7</h2>
            </div>
        </article>
        <article class='box box-8'>
            <div class='content'>
                <h2>Content 8</h2>
            </div>
        </article>
        <article class='box box-9'>
            <div class='content'>
                <h2>Content 9</h2>
            </div>
        </article>
        <article class='box box-10'>
            <div class='content'>
                <h2>Content 10</h2>
            </div>
        </article>
        <article class='box box-11'>
            <div class='content'>
                <h2>Content 11</h2>
            </div>
        </article>
        <article class='box box-12'>
            <div class='content'>
                <h2>Content 12</h2>
            </div>
        </article>
        <article class='box box-13'>
            <div class='content'>
                <h2>Content 13</h2>
            </div>
        </article>
        <article class='box box-14'>
            <div class='content'>
                <h2>Content 14</h2>
            </div>
        </article>
        <article class='box box-15'>
            <div class='content'>
                <h2>Content 15</h2>
            </div>
        </article>
        <article class='box box-16'>
            <div class='content'>
                <h2>Content 16</h2>
            </div>
        </article>
        <article class='box box-17'>
            <div class='content'>
                <h2>Content 17</h2>
            </div>
        </article>
        <article class='box box-18'>
            <div class='content'>
                <h2>Content 18</h2>
            </div>
        </article>
        <article class='box box-19'>
            <div class='content'>
                <h2>Content 19</h2>
            </div>
        </article>
        <article class='box box-20'>
            <div class='content'>
                <h2>Content 20</h2>
            </div>
        </article>
        <article class='box box-21'>
            <div class='content'>
                <h2>Content 21</h2>
            </div>
        </article>
        <article class='box box-22'>
            <div class='content'>
                <h2>Content 22</h2>
            </div>
        </article>
        <article class='box box-23'>
            <div class='content'>
                <h2>Content 23</h2>
            </div>
        </article>
        <article class='box box-24'>
            <div class='content'>
                <h2>Content 24</h2>
            </div>
        </article>
        <article class='box box-25'>
            <div class='content'>
                <h2>Content 25</h2>
            </div>
        </article>
    </div>
</main>

MODERNIZR ENABLED modernizr is used to check browser capability against css columns. If it isn't supported, the browser will show up a fallback with "text-align: justify" and "display: inline-block;" 参考源： https://github.com/doptrois/SASSMasonryMixin

编辑器支持Emmet

快捷键

MODERNIZR ENABLED modernizr is used to check browser capability against css columns. If it isn't supported, the browser will show up a fallback with "text-align: justify" and "display: inline-block;" 参考源： https://github.com/doptrois/SASSMasonryMixin

HTML5 + GSAP + Founation.css构建响应式博客文章列表页面布局模板

css3使用flexbox实现3列瀑布流（masonry）布局（水平方向排序）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：