DivBoxFloat

by ryooo321

HTML

<div>
<a href="#" data-filter="1" class="controller">すべて</a>
<a href="#" data-filter="2" class="controller">2の倍数</a>
<a href="#" data-filter="3" class="controller">3の倍数</a>
<a href="#" data-filter="12" class="controller">12の倍数</a>
</div>


<div class="bloat_boxes">

<div class="float_box" data-val="1"><div class="image_box">1<img src="#"></div></div>
<div class="float_box" data-val="2"><div class="image_box">2<img src="#"></div></div>
<div class="float_box" data-val="3"><div class="image_box">3<img src="#"></div></div>
<div class="float_box" data-val="4"><div class="image_box">4<img src="#"></div></div>
<div class="float_box" data-val="5"><div class="image_box">5<img src="#"></div></div>
<div class="float_box" data-val="6"><div class="image_box">6<img src="#"></div></div>
<div class="float_box" data-val="7"><div class="image_box">7<img src="#"></div></div>
<div class="float_box" data-val="8"><div class="image_box">8<img src="#"></div></div>
<div class="float_box" data-val="9"><div class="image_box">9<img src="#"></div></div>
<div class="float_box" data-val="10"><div class="image_box">10<img src="#"></div></div>
<div class="float_box" data-val="11"><div class="image_box">11<img src="#"></div></div>
<div class="float_box" data-val="12"><div class="image_box">12<img src="#"></div></div>
<div class="float_box" data-val="13"><div class="image_box">13<img src="#"></div></div>
<div class="float_box" data-val="14"><div class="image_box">14<img src="#"></div></div>
<div class="float_box" data-val="15"><div class="image_box">15<img src="#"></div></div>
<div class="float_box" data-val="16"><div class="image_box">16<img src="#"></div></div>
<div class="float_box" data-val="17"><div class="image_box">17<img src="#"></div></div>
<div class="float_box" data-val="18"><div class="image_box">18<img src="#"></div></div>
<div class="float_box" data-val="19"><div class="image_box">19<img src="#"></div></div>
<div class="float_box" data-val="20"><div class="image_box">20<img...

CSS

.float_box{
    float:left;
    padding:2px;
    width:102px;
    height:102px;
    border:1px solid;
    border-radius: 6px;
    -ms-transition-property: -ms-transform, opacity;
    -ms-transition-duration: 0.8s;
    -moz-transition-property: -moz-transform, opacity;
    -moz-transition-duration: 0.8s;
    -webkit-transition-property:-webkit-transform, opacity;
    -webkit-transition-duration :0.8s;
    overflow:hidden;
    position:absolute;
    top:0px;
    left:0px;
}

.image_box{
    width:100px;
    height:100px;
    border:none;
    border-radius: 4px;
    overflow:hidden;
}
.image_box img{
    width:100px;
    height:100px;
    border-radius: 3px;
}
.bloat_boxes {
    position:relative;
}

JavaScript

(function($) {
    var filter_num = 1;
    var window_width;
    var unit_l;
    var unit_t;
    var row_unit;
    var unit_margin = 10;
    var boxes = {};
    $.fn.extend({
        filterByNum: function() {
            window_width =$(window).width();
            unit_l = 0;
            unit_t = 0;
            row_unit = 0;
            boxes = $("div.float_box");
            $.map(boxes, function (i, num) {
                var box = boxes[num];
                var val = $(box).attr("data-val");
                if (val % filter_num !== 0) {
                    box.isShow = false;
                    box.unit_l = unit_l;
                    box.unit_t = unit_t;
                } else {
                    unit_l = (row_unit) * ($(box).width() + unit_margin);
                    if (unit_l + $(box).width() > window_width) {
                        unit_t += ($(box).height() + unit_margin);
                        unit_l = 0;
                        row_unit = 0;
                    }
                    row_unit++;
                    box.isShow = true;
                    box.unit_l = unit_l;
                    box.unit_t = unit_t;
                }
            });
            $(this).adjustTranslate();
            return false;
        },
        adjustTranslate: function() {
            $.map(boxes, function (i, num) {
                var box = boxes[num];
                if (box.isShow === true) {
                    $(box).css("-ms-transform", "translate(" + box.unit_l + "px, " + box.unit_t + "px) scale(1, 1)");
                    $(box).css("-webkit-transform", "translate3d(" + box.unit_l + "px, " + box.unit_t + "px, 0px) scale3d(1, 1, 1)");
                    $(box).css("-moz-transform", "translate(" + box.unit_l + "px, " + box.unit_t + "px) scale(1, 1)");
                } else {
                    $(box).css("-ms-transform", "translate(" + box.unit_l + "px, " + box.unit_t + "px) scale(0.001, 0.001)");
                   ...