60 — это магическое число

    Превьюшки бывают четырёх типов:
    1. фиксированные по длине и % по высоте от оригинала
    2. фиксированные по высоте и % по длине от того же оригинала
    3. фиксированные по длине и высоте (с обрезанием части после масштабирования, которая не вписана, например 300х150)
    4. процентный масштаб (25% от оригинала, к примеру)

    И каждый, кто создает галерею задается вопросом: «сколько вешат граммов?» «сколько превью разместить по дефолту в галерее?»

    Если у вас изображения c разным соотношением сторон и «свободный контейнер» и вы используете 1, 2 или 4й (если такой тип с его дизайнерами еще не вымерли в вебе), то эта заметка вам погоды не сделает. Но если вы используете 3й тип, или используете 1 или 2 и все изображения имеют у вас одинаковое соотношения сторон, то вам сюда.

    Когда у вас резиновый дизайн, то превьюшки плавно растекаются по свободному пространству. Это выглядит очень круто до того момента, пока юзер не долистал до самого низа. Далее он видит переход на следующую страницу и… «лесенку» или «зуб», это последние несколько превьюшек, которые выпирают из общей сетки. Вот в этот момент люди начитают использовать трюки с CSS, центрировать их, в общем окунаются по полной для достижения идеального дизайна. Или используют на masonry вот такой жестокий трюк с котятами, все равно подчищая хвосты… Компьютерныйбоже им судья.

    Мои же личные фломастеры со сгрызенными колпачками и выпитыми чернилами предпочитают фиксированные галереи где есть отступ между картинками и с краев. Вот такие вот:

    image

    Я использую masonry и magnific popup, а дефолтное количество изображений в моих галереях — 60.

    Шестьдесят (60), это число, которое делится без остатка на 2, 3, 4, 5 и 6 и, конечно же, на 1.

    Сея магия чисел позволяет вам охватить аудиторию от «мобильников» до широкоформатников без искажения и прочей безконтрольной езды дизайна вашей галереи.

    image

    Конечно, на вкус и цвет есть гугл и яндекс, есть лебедев и есть «каждый третий гуру», но в плане создания простой галереи без ломания головы сей трюк (60!) вам непременно сослужит добрую службу.

    Превьюшки на примерах имеют размер 160 на 300 пикселей. Мое личное наблюдения как очкарика, 300 пикселей по длине и % масштаб по высоте очень удобное и компактное решение. Таким образом 60 превьюшек в 80м качестве imagemagick займут у вас около 600кб траффика (от 8 до 12кб на каждую), которые можно ловко обернуть в lazyload как на этом примере (я не автор примера!).

    З.Ы, без прав рекламы — лучшие фломастеры это детские. Их можно грызть, перемазать язык и зубы без шанса отравится. Данный метод дает +2 к алгоритмам, ибо мозг работает лучше. Ух лучше их, чем чипсы орешки.

    Про магию числа 69 и его её практическое применение я расскажу в следующих статьях.

    upd: с картинками какая-то ерунда. Я их вставляю, далее хабр пытается что-то сделать и выдает
    <img src="1449681149734756164123" alt="image"/>
    
    теперь с hsto
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 17

      –5
      А почему не 48?
        +1
        не делится на 5?
          0
          48/5=?
            0
            Зато делится на 12, 16 и 24.
              0
              а 143003561 делится только на 143003561.

              Смысл в делении: от самого малого 2(1) до сколько получится в бОльшую сторону. Используя 60 превьюшек на «резиновом» сайте у вас всегда будет до 6 элементов на ряд без «ломки» сетки. При размере превьюшки в 300 пикселей это покроет fullHD экран. И у человека не будет пропусков внизу.

                0
                Все равно шаманство это, проще vh использовать и content aware css selectors.
                  0
                  Не знаю что это такое, напишите годную статью на хабр, если еще нет.
                  А так да, магия числа 60. Чем проще — тем лучше!
                  –1
                  Мне больше нравится 1000000000000066600000000000001, которое тоже делится только на себя=)
            –2
            А почему не 2520?
            • UFO just landed and posted this here
                +3
                Кому можно? Если пилишь свой проект и плевать на пару процентов пользователей – можно! Если реализуешь чужой проект с указанными требованиями то нельзя
                • UFO just landed and posted this here
                    +1
                    Так в данном случае float решает проблему, flexbox не даст никаких преимуществ
                    • UFO just landed and posted this here
                      +1
                      И поддерживать две версии верстки, когда старый вариант решает проблему полностью.
                      • UFO just landed and posted this here
                          0
                          Нуу… если эта единственная строчка считается полноценным фоллбеком… то разговор просто теряет смысл.
                          Нормальный, полноценный, правильно работающий фоллбек делается на тех же флоатах.
                          А это — говнокод «и та-а-ак пойдет».

                Only users with full accounts can post comments. Log in, please.