№ 5631 В разделе "Programming"
от November 4th, 2013,
В подшивках: PHP
Понадобилось мне сегодня сверстать страничку так, чтобы li укладывались в 3 столбца, но по газетному типу, а не по ебанутому как значки в панели управления Windows 7. Существующие методы на CSS и JavaScript меня совсем не впечатлили и поэтому я занялся созданием собственного велосипеда.
Итак, формулирую задачу:
– разбивка на 3 столбца
– газетная верстка
– примерно одинаковое количество строк во всех столбцах
Конечно, это не вегда удобно, если у вас сотни строк в массиве, ведь это ж какая портянка получится… Придется 2 раза прыгать в начало страницы, чтобы продолжить читать элементы списка. В этом случае можно обойтись CSS, который раскидывает элементы иначе и этот способ тут не рассматривается, т.к. его уже стопицот раз рассмотрели на других сайтах.
Код получился до отупения простой с несколькими счетчиками
<div id="binds"> <? $rows=ceil(count($binds)/3); $rows_cnt=$rows; $cnt=count($binds); foreach($binds as $bind) { if ($rows_cnt==$rows) echo "<ul>"; echo "<li><a href='". base_url('/tags/'.$bind->tags)."'>".$bind->name. "</a><sup>".$bind->weight."</sup></li>\n"; $rows_cnt--; $cnt--; if ($rows_cnt==0 or $cnt==0 ) echo "</ul>\n\n"; if ($rows_cnt==0) $rows_cnt=$rows; }?> </div>
Разберемся что за переменные здесь учавствуют. $binds содержит в себе массив объектов, полученых из базы данных и который надо показать пользователю. Необходимо разделить это количество на 3 (колонок же 3 делаем, да?) и получить количество строк, огруглив результат в большую сторону. Ну а дальше тупой перебор и писование htmlом по парсеру браузера.
Теперь у нас 3 раздельных списка, которые без нужного CSS рисуются тупо один за другим. Добавляем CSS в стили…
#binds { float:none; } #binds ol, #binds ul { float:left; width:33%; margin:0px; padding:0px; list-style:none; margin-bottom:1em; } #binds li { margin:0px; padding:0px; }
А вот полученый результат с правильной сортировкой
Fortune cookie: Asked a supplicant priest of the pontiff, "Do I sin if I do what I want, if I screw a young nun In the eastertide sun?" His holiness murmured, "Gut yontiff."
Leave a Reply