Верстка в 2 колонки с помощью jQuery Masonry

jQuery Masonry

Заметка немного не в формате блога. Ну да ладно, сам возился, может кому интересно будет. Речь пойдет о верстке, в которой я плохо разбираюсь. Но волей-неволей пришлось пострадать, чтобы сделать блоки в две колонки, как на главной (анонсы статей, каждый анонс - свой блок).

Смысл в том, что при блочной верстке блоки позиционируются либо абсолютно на экране, либо относительно друг друга. Дело в том, что у нас на главной изначально были блоки фиксированной высоты - тогда проблема решается сама собой. Но к сожалению не хотелось подгонять все анонсы так, чтобы они были одинаковой высоты. А если этого не делать - образовываются пустые места на стыке. Когда правый блок получается длиннее левого. Всё потому, что блоки позиционируются атрибутом float: left. Что по сути означает, что блок "приклеивается" своей левой гранью к предыдущему блоку. Когда места справа нет, то он соответственно размещается ниже.

Можно конечно переверстать вывод блоков и формировать их в два независимых "колоночных" блока. Но тогда и выводить их надо через один, и опять же по высоте снизу пустое место может образоваться. Короче не очень хорошо получается.

В сети проблема часто всплывает, много чего по этому поводу рассказано. И не меньше решений. Но я не хотел вдаваться в тонкости верстки и сильно всё переделывать. Поэтому я пошел другим путем - нашел такую вещь, как jQuery Masonry. Это скрипт, который как раз таки решает мою задачу. Он перепозиционирует указанные блоки внутри одного контейнера абсолютно, рассчитывая уже их размеры. В целом решает задачу он хорошо. Единственный минус - пока страница не прогрузится со всеми изображениями, он не сработает. Если конечно у всех изображений прописаны размеры в коде, то можно уже после загрузки страницы его вызывать. Но страница хотя бы сама должна целиком в любом случае загрузиться.

Возможно кому-нибудь пригодится, т.к. штуку эту найти нелегко было. На сайте этого скрипта сразу виден пример, что он делает.

Оцените статью: 
В среднем: 3.2 (проголосовало 17)

Комментарии (1)

Спасибо за пост очень пригодился!)

Добавить комментарий

Войти, используя один из провайдеров Google Account Yandex Mail.ru API Mail.ru Vkontakte Facebook Twitter Loginza MyOpenID WebMoney Rambler Flickr Last.fm Verisign AOL OpenID

Filtered HTML

  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешённые HTML-теги: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Строки и параграфы переносятся автоматически.

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.