Mikhail_RU
@Mikhail_RU
учусь

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

Всем привет!

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

Заранее спасибо откликнувшимся!
  • Вопрос задан
  • 2413 просмотров
Пригласить эксперта
Ответы на вопрос 1
@n1ger
html+css
открываете его сорцы и смотрите.
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
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы