Сразу просьба не плеваться и не кидать в меня тапками. Я только учусь ))
Наткнулся на интересное решение для вывода списка постов, но не совсем разобрался с тем как же это все...
Скрин.
Страница в исходниках выглядит довольно странно - пару ссылок на скрипты js, а там черт ногу сломит...
В DOM-е видно, что родительский блок с жестко заданной высотой и, на сколько я понимаю, скриптом высчитывается размер окна, а от него уже все это пляшет очень даже адаптивно.
И блоки расположены "по часовой" - верхний ряд идет слева направо, а нижний - справа налево.
Вопросы:
1. Очень интересно узнать какие еще есть "креативные" способы вывести адаптивно список статей? Желательно с примером кода или исходниками.
2. Как сделать такой вывод списка постов? Так понимаю можно, даже на чистом css расписать расположение хорошенько попользовав
@media?
3. Нет ли бесплатного плагина для такой или подобной красоты для Wordpress?
4. Как и на чем вообще делаются подобные сайты? Мне такое первый раз попалось и очень заинтересовало.
Код страницы по Ctrl+U:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>Azerbaijan Fashion Week</title>
<link rel=apple-touch-icon-precomposed sizes=57x57 href=/static/images/favicon/apple-touch-icon-57x57.png>
<link rel=apple-touch-icon-precomposed sizes=114x114 href=/static/images/favicon/apple-touch-icon-114x114.png>
<link rel=apple-touch-icon-precomposed sizes=72x72 href=/static/images/favicon/apple-touch-icon-72x72.png>
<link rel=apple-touch-icon-precomposed sizes=144x144 href=/static/images/favicon/apple-touch-icon-144x144.png>
<link rel=apple-touch-icon-precomposed sizes=60x60 href=/static/images/favicon/apple-touch-icon-60x60.png>
<link rel=apple-touch-icon-precomposed sizes=120x120 href=/static/images/favicon/apple-touch-icon-120x120.png>
<link rel=apple-touch-icon-precomposed sizes=76x76 href=/static/images/favicon/apple-touch-icon-76x76.png>
<link rel=apple-touch-icon-precomposed sizes=152x152 href=/static/images/favicon/apple-touch-icon-152x152.png>
<link rel=icon type=image/png href=f/static/images/favicon/avicon-196x196.png sizes=196x196>
<link rel=icon type=image/png href=/static/images/favicon/favicon-96x96.png sizes=96x96>
<link rel=icon type=image/png href=/static/images/favicon/favicon-32x32.png sizes=32x32>
<link rel=icon type=image/png href=/static/images/favicon/favicon-16x16.png sizes=16x16>
<link rel=icon type=image/png href=/static/images/favicon/favicon-128.png sizes=128x128>
<meta name=application-name content= >
<meta name=msapplication-TileColor content=#FFFFFF>
<meta name=msapplication-TileImage content=/static/images/favicon/mstile-144x144.png>
<meta name=msapplication-square70x70logo content=/static/images/favicon/mstile-70x70.png>
<meta name=msapplication-square150x150logo content=/static/images/favicon/mstile-150x150.png>
<meta name=msapplication-wide310x150logo content=/static/images/favicon/mstile-310x150.png>
<meta name=msapplication-square310x310logo content=/static/images/favicon/mstile-310x310.png>
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css integrity=sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ crossorigin=anonymous>
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js></script>
<link href=/static/css/app.d0cf759f82a7b9755ed43501ad3396f0.css rel=stylesheet>
</head>
<body>
<div id=app>
<app v-cloak></app>
</div>
<script type=text/javascript src=/static/js/manifest.446cdcbf60252e205956.js></script>
<script type=text/javascript src=/static/js/vendor.18087f6816bc0f85ef90.js></script>
<script type=text/javascript src=/static/js/app.b9d6847b26843e296047.js></script>
</body
></html>
5. Есть-ли какие инструменты для приведения в читабельный вид скриптов js написанных в одну строку? Желательно бесплатных, онлайн или под Линух. Sublime Text 3 что-то не очень с таким справляется
P.S.
Заранее спасибо всем неравнодушным.
P.P.S.
Две спасибы за развернутый ответ и/или примеры кода
Простой
