Как реализован этот эффект?

Question

[Михаил]

Всем привет!

Коллеги, накидайте, пожалуйста, идей как можно реализовать адаптивный эффект как на сайте infox(.)sg (блоки меняют свое положение при изменении размера окна браузера)?
Что-то типа Masonry?

Заранее спасибо откликнувшимся!

Answer 1

[Евгений]

открываете его сорцы и смотрите.

var all_transform = {
    '.transform_col_5': 0,
    '.transform_col_4': 0,
    '.transform_col_3': 0,
    '.transform_col_2': 0,
    '.transform_col_1': 0
};
var timer_search = false;
var count_column = 5;
var transform = true;
function col_margin(width) {
        //class_name = col-mar-5-20
        var cont = $('#in_cont');
        var body = $('body');
        cont.removeClass("col-mar-5-20");
        cont.removeClass("col-mar-5-10");
        cont.removeClass("col-mar-3-20");
        body.removeClass("cm5-20");
        body.removeClass("cm5-10");
        body.removeClass("cm3-20");
        if (width >= 1300) {
            cont.addClass('col-mar-5-20')
            body.addClass('cm5-20')
        } else if (width < 1300 && width >= 1000) {
            cont.addClass('col-mar-5-10')
            body.addClass('cm5-10')
        } else if (width < 1000 && width >= 800) {
            body.addClass('cm3-20')
            cont.addClass('col-mar-3-20')
        } else if (width < 800) {
            cont.addClass('col-mar-5-10')
            body.addClass('cm5-10')
        }
    }
    function col_count(width) {
        var cont = $('#cont');
        back_move_pic_text(all_transform);
        if (navigator.userAgent.match(/iPhone/i)) {
            if (getOrientation() == 'portrait') {
                set_column(1);
                binner_set_class_transform(false);
            } else {
                set_column(2);
                binner_set_class_transform(true);
            }
            return false;
        }
        if (width >= 1260) {
            set_column(5);
            binner_set_class_transform(true);
        } else if (width < 1260 && width >= 1015) {
            set_column(4);
            binner_set_class_transform(true);
        } else if (width < 1015 && width >= 750) {
            set_column(3);
            binner_set_class_transform(true);
        } else if (width < 750 && width >= 500) {
            set_column(2);
            binner_set_class_transform(true);
        } else if (width < 500) {
            set_column(1);
            binner_set_class_transform(false);
        }
        if (count_column >= 4 && show_time_line == false) {
            time_line_show();
            show_time_line = true;
        }
        if (count_column < 4 && show_time_line == true) {
            time_line_hide();
            show_time_line = false;
        }
    }
    function set_column(_cc) {
        var cont = $('#cont');
        var body = $('body');
        count_column = _cc;
        for (var i = 0; i <= 5; i++) {
            cont.removeClass("col-count-" + i);
            body.removeClass("cc-" + i);
        }
        cont.addClass('col-count-' + _cc);
        body.addClass('cc-' + _cc);
        move_pic_text('.transform_col_' + _cc);
    }
    function binner_set_class_transform(tr) {
        if (tr) {
            $('#in_cont').removeClass('notransform');
            $('#in_cont').addClass('transform');
        } else {
            $('#in_cont').removeClass('transform');
            $('#in_cont').addClass('notransform');
        }
    }
    function move_pic_text(block_name) {
        var title = '';
        $.each($(block_name), function () {
            title = $(this).find('.title').remove();
            $(this).prepend(title);
            all_transform[block_name] = 1;
        })
    }
    function back_move_pic_text(all_block_name) {
        for (block_name in all_block_name) {
            if (all_block_name[block_name]) {
                var title = '';
                $.each($(block_name), function () {
                    title = $(this).find('.title').remove();
                    $(this).find('.pic').after(title)
                    all_transform[block_name] = 0;
                })
            }
        }
    }
    patt = /adebug/g;
    if (patt.test(document.cookie)) {
        var la = 1
        $.each($('.layout-1, .layout-2, .layout-3'), function () {
            var b = 1;
            $.each($(this).children(), function () {
                $(this).append('<div class="name_block">' + la + '-' + b + '</div>');
                b++;
            })
            la++;
        })
    }

Ну и в HTML и CSS смотрите на стили блоков, которые участвуют и которые меняются в этом деле.
infox.sg/static/css.css?v109

Comments

[Михаил]

Там плагин готовый работает. Ответ был уже на мой вопрос, но его потерли.