column-count test

by Neviton

HTML

<button id="add">ADD ITEM</button>
<button id="clear">CLEAR LIST</button>
<ul id="list"></ul>

CSS

ul {
  list-style: none;  
}

#list {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    
    font-family: Verdana;
    background-color: #fbb;
    padding: 5px;
    
    height: 419px;
}

#list li {
  margin-bottom: 1px;
  background-color: #fdd;
  display: inline-block;
  /*white-space: nowrap;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;*/
}

JavaScript

var list = document.getElementById('list'),
		add = document.getElementById('add'),
    clear = document.getElementById('clear'),
    i = 0;


function addItem() {
	var item = document.createElement('li'),
  		subList = document.createElement('ul'),
      subItem1 = document.createElement('li'),
      subItem2 = document.createElement('li');
  
  subItem1.innerHTML = 'SubItem 1 Paranauê Doido Maluco';
  subItem2.innerHTML = 'SubItem 2 Paranauê Doido Maluco';
  
  subList.appendChild(subItem1);
  
  if (Math.random() > 0.5) {
		subList.appendChild(subItem2);
  }
  
  item.innerHTML = i + ' Item Paranauê Doido Maluco';
  item.appendChild(subList);
	list.appendChild(item);
  i++;
}

function clearItems() {
  	list.innerHTML = '';
    i = 0;
}

add.addEventListener('click', addItem);
clear.addEventListener('click', clearItems);