jQuery MixItUp.js插件构建响应式网格列表

上面一排是过滤条件，选择过滤条件后，下面的网格列表会自行过滤并调整位置。

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body,
button {
    font-family: 'Helvetica Neue', arial, sans-serif;
}
.controls {
    padding: 2%;
    background: #333;
    color: #eee;
}
label {
    font-weight: 300;
    margin: 0 0.4em 0 0;
}
#Container .mix {
    display: none;
}
.project-cards-container {
    padding: 2% 2% 0;
    text-align: justify;
    font-size: 0.1px;
    background: #68b8c4;
    -webkit-backface-visibility: hidden;
}
.project-cards-container:after {
    content: '';
    display: inline-block;
    width: 100%;
}
.project-cards-container .mix,
.project-cards-container .gap {
    display: inline-block;
    width: 49%;
}
.project-cards-container .mix {
    text-align: left;
    background: #03899c;
    margin-bottom: 2%;
    display: none;
}
.project-cards-container .mix .category-1 {
    border-top: 2px solid limegreen;
}
.project-cards-container .mix .category-2 {
    border-top: 2px solid yellow;
}
.project-cards-container .mix:after {
    content: attr(data-myorder);
    color: white;
    font-size: 16px;
    display: inline-block;
    vertical-align: top;
    padding: 4% 6%;
    font-weight: 700;
}
.project-cards-container .mix:before {
    content: '';
    display: inline-block;
    padding-top: 60%;
}
@media all and (min-width: 420px) {
    .project-cards-container .mix,
    .project-cards-container .gap {
        width: 32%;
    }
}
@media all and (min-width: 640px) {
    .project-cards-container .mix,
    .project-cards-container .gap {
        width: 23.5%;
    }
}

HTML

<div class="row">
        <div class="col-xs-12 controls">
            <label>Filter:</label>
            
            <button class="filter btn btn-default" data-filter="all">All</button>
            <button class="filter btn btn-default" data-filter=".category-1">Category 1</button>
            <button class="filter btn btn-default" data-filter=".category-2">Category 2</button>

<button class="sort btn btn-default" data-sort="my-order:asc">Ascending Order</button>
            <button class="sort btn btn-default" data-sort="my-order:desc">Descending Order</button>
        </div>
    </div>

上面一排是过滤条件，选择过滤条件后，下面的网格列表会自行过滤并调整位置。

编辑器支持Emmet

快捷键

上面一排是过滤条件，选择过滤条件后，下面的网格列表会自行过滤并调整位置。

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

HTML5+jQuery.waypoints旅行者的时间表页面模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：