Форум

loneWolf · #1 (**permalink**) 03.06.2014, 17:08

Как реализовать вывод списка в несколько колонок на javascript:
1 4 7
2 5 8
3 6
я только учусь.

рони · #2 (**permalink**) 03.06.2014, 17:25

loneWolf,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  ul{
      -webkit-column-count: 3;
      -moz-column-count: 3;
      column-count: 3;
  }

  </style>
</head>

<body>
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
<li>Пункт 5</li>
<li>Пункт 6</li>
<li>Пункт 7</li>
<li>Пункт 8</li>
</ul>
</body>

</html>

loneWolf · #3 (**permalink**) 03.06.2014, 17:27

Как это делается стилями в курсе, а как реализовать это на javascript?

Sweet · #4 (**permalink**) 03.06.2014, 17:35

Сообщение от loneWolf

Как это делается стилями в курсе, а как реализовать это на javascript?

Быгыгы:

var ul = document.querySelector("ul");
var style = ul.style;
style.webkitColumnCount = style.mozColumnCount = style.columnCount = 3;

loneWolf, js - это язык, с помощью которого можно управлять api браузера. Можно по-разному реализовать колонки, но это почти всегда будет сделано через css (не считая, к примеру, canvas-реализации).

loneWolf · #5 (**permalink**) 03.06.2014, 17:37

В 9 Ие это уже не будет работать.

Sweet · #6 (**permalink**) 03.06.2014, 17:49

Сообщение от loneWolf

В 9 Ие это уже не будет работать.

Гугли библиотеки. Если ты "только учишься" и интерес обучающего характера, то суть в том, чтобы закидывать по элементу в элемент-колонку и проверять его высоту. Если высота становится больше некоторой величины, выдергиваешь последний добавленный элемент и закидываешь в следующую колонку. И т.д.

loneWolf · #7 (**permalink**) 04.06.2014, 14:25

Получилось, мож кому пригодится

window.addEventListener('load', function() {
    xhttp = new XMLHttpRequest();
    xhttp.open('GET', 'tt_inworld.json', true);
    xhttp.send();
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4) {
            var listFlags = JSON.parse(xhttp.responseText);
            newULFlags(listFlags);
        }
    }
    
    var newULFlags = function(data) {
		var divFlags = document.getElementById('flags');
       
		var list = [];
	
		var cols = 3;
        var count = Math.ceil(data.length/cols);
        var cnt = 0;
		var str = '';
		var items = [];

			data.forEach(function(element, key) {
				
				str = '<li style="background:url(http://test.ru/images/flags/' + element.flag + ') no-repeat;" id="' + key + '">';
				
			   if (element.SiteInWorld.length > 1) {
				str += '<span>' + element.world_name + '</span>' + '<a class="name-title" href="' + element.SiteInWorld[0].link + '">' + element.SiteInWorld[0].title + '</a>' + '<a href="' + element.SiteInWorld[1].link + '">' + element.SiteInWorld[1].title + '</a>';
				}
				else {
					str +=  '<a href="' + element.SiteInWorld[0].link + '">' + element.world_name + '</a>';
				}
				str += '</li>';
				
				list.push(str);
				
				cnt++;
                    if (cnt == count) {
					var str1 = '';
                        str1 += list.join('');
						items.push(str1);
                        cnt = 0;
                        list = [];
                        var mod = data.length%3;
                        if (mod === 1) {
                            count = Math.ceil(data.length/cols)-1;
                        }
					 }
					
			});
			
			items.forEach( function(el){
				var ul = document.createElement('ul');
				console.log(el);
				ul.innerHTML = el;
				divFlags.appendChild(ul);
				
			});
	};
});

Форум

Справочник

Discord чат

Курсы javascript