A Pen by Caroline Artz.
@import "compass/css3";
@mixin respond-to($media) {
/* Landscape phones and down */
@if $media == phone {
@media (max-width: 480px) {
@content;
}
}
@else if $media == tablet-portrait {
@media (min-width: 481px) and (max-width: 768px) {
@content;
}
}
@else if $media == tablet-landscape {
@media (min-width: 769px) and (max-width: 1024px) {
@content;
}
}
@else if $media == desktop {
@media (min-width: 1025px) and (max-width: 1440px) {
@content;
}
}
@else if $media == large-desktop {
@media (min-width: 1441px) {
@content;
}
}
}
@mixin respondto($media...) {
@each $mediatype in $media {
@include respond-to($mediatype) {
@content;
}
}
}
/*************************************************/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
color: #490033;
}
.packery {
background: #FDD;
background: #ede5e5;
margin: 0 auto;
}
/* clearfix */
.packery:after {
content: ' ';
display: block;
clear: both;
}
.post {
width:345px;
height: 345px;
float: left;
background: #C09;
/* border: 4px solid #333; */
/* border-color: hsla(0, 0%, 0%, 0.3); */
}
.post.expanded {
background: #fb6967;
}
$square-dimension: 345px;
$gutter: 10px;
.packery {
@include respondto(large-desktop, desktop, tablet-landscape) {
.post.expanded {
width: $square-dimension*2 + $gutter;
height: $square-dimension*1.5 + $gutter;
}
}
@include respondto(tablet-portrait, phone) {
.post.expanded {
height: $square-dimension*2 + $gutter;
width: $square-dimension;
}
}
}
// http://packery.metafizzy.co/packery.pkgd.js added as external resource
// overwrite Packery methods
var __resetLayout = Packery.prototype._resetLayout;
Packery.prototype._resetLayout = function() {
__resetLayout.call(this);
// reset packer
var parentSize = getSize(this.element.parentNode);
var colW = this.columnWidth + this.gutter;
this.fitWidth = Math.floor((parentSize.innerWidth + this.gutter) / colW) * colW;
console.log(colW, this.fitWidth)
this.packer.width = this.fitWidth;
this.packer.height = Number.POSITIVE_INFINITY;
this.packer.reset();
};
Packery.prototype._getContainerSize = function() {
// remove empty space from fit width
var emptyWidth = 0;
for (var i = 0, len = this.packer.spaces.length; i < len; i++) {
var space = this.packer.spaces[i];
if (space.y === 0 && space.height === Number.POSITIVE_INFINITY) {
emptyWidth += space.width;
}
}
return {
width: this.fitWidth - this.gutter,
height: this.maxY - this.gutter
};
};
// always resize
Packery.prototype.resize = function() {
this.layout();
};
var $container = $('.packery').packery({
itemSelector: '.post',
columnWidth: 345,
gutter: 10
});
$(function() {
var $container = $('.packery').packery();
$container.on('click', '.post', function(event) {
var $target = $(event.target);
var isGigante = $target.hasClass('expanded');
$target.siblings().removeClass('expanded');
$target.toggleClass('expanded');
if (isGigante) {
// if shrinking, just layout
$container.packery();
} else {
$container.packery('fit', event.target);
}
});
});
<h1>Packery - centered</h1>
<p>This feature will only work with fixed-width columns.</p>
<div class="packery">
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
</div>
Ref #7
Forked from David DeSandro's Pen Packery - fitWidth.
A Pen by Caroline Artz on CodePen.