Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JavaScript/jQuery сортировка элементов DOM / 4 сообщений из 4, страница 1 из 1
24.02.2015, 23:47
    #38887832
poiuytrewq
poiuytrewq
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JavaScript/jQuery сортировка элементов DOM
Доброй ночи, коллеги,

столкнулся с задачей сортировки группы элементов DOM для отображения в две или три колонки в зависимости от ширины окна браузера пользователя. В проекте используется Bootstrap. Вот такой простенький HTML отобразит данные в две или три колонки в зависимости от ширины окна браузера (у всех вложенных div-ов есть CSS свойство {float: left}).

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<div id="list">
	<div data-count="7" class="col-xs-6 col-lg-4">07</div>
	<div data-count="8" class="col-xs-6 col-lg-4">08</div>
	<div data-count="9" class="col-xs-6 col-lg-4">09</div>
	<div data-count="10" class="col-xs-6 col-lg-4">10</div>
	<div data-count="11" class="col-xs-6 col-lg-4">11</div>
	<div data-count="12" class="col-xs-6 col-lg-4">12</div>
	<div data-count="1" class="col-xs-6 col-lg-4">01</div>
	<div data-count="2" class="col-xs-6 col-lg-4">02</div>
	<div data-count="3" class="col-xs-6 col-lg-4">03</div>
	<div data-count="4" class="col-xs-6 col-lg-4">04</div>
	<div data-count="5" class="col-xs-6 col-lg-4">05</div>
	<div data-count="6" class="col-xs-6 col-lg-4">06</div>
	<div data-count="13" class="col-xs-6 col-lg-4">13</div>
</div>



Задача отсортировать элементы так, чтобы "на выходе" вывод в три колонки выглядел так

Код: html
1.
2.
3.
4.
5.
1	6	11
2	7	12
3	8	13
4	9	
5	10



Ну, и в две соответственно так

Код: html
1.
2.
3.
4.
5.
6.
7.
1	8
2	9
3	10
4	11
5	12
6	13
7



Задача для меня оказалась непосильной, прошу помощи у гуру. Пока что у меня получилось следющее:

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
function sortList()
{
	var data = $("#list > div");

	// Сначала сортируем элементы по порядку
	// по аттрибуту 'data-count'

	data.sort(function (a, b)
	{
		a = parseInt($(a).attr('data-count'), 10);
		b = parseInt($(b).attr('data-count'), 10);

		if(a > b)
		{
			return 1;
		}
		else if(a < b)
		{
			return -1;
		}
		else
		{
			return 0;
		}
	});

	var result = {};
	var cols = 3; // К-во колонок
	var rows = Math.ceil($(data).size()/cols);
	var prev;
	var i = 0;

	for(var row = 1; row <= rows; row++)
	{
		for(var col = 1; col <= cols; col++)
		{
			var index = (col == 1) ? row : row + (rows * (col - 1));
			index--;

			if(index in data)
			{
				result[i] = data[index];
				i++;
			}
			else
			{
				// Здесь нужно как-то добавить пустой
				// элемент <div class="col-xs-6 col-lg-4"></div>
				// но как ?????????
				// $(result[i-1]).after('<div class="col-xs-6 col-lg-4">-</div>'); НЕ РАБОТАЕТ

			}
		}
	}

	$('#list').html(result);
}



Не знаю, насколько данный код оптимален, но он работает, за исключением того, что я не придумал как добавить новый элемент пустышку
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
25.02.2015, 10:08
    #38888032
уточнить
уточнить
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JavaScript/jQuery сортировка элементов DOM
poiuytrewq,

я правильно понял, что из этого блока
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<div id="list">
	<div data-count="7" class="col-xs-6 col-lg-4">07</div>
	<div data-count="8" class="col-xs-6 col-lg-4">08</div>
	<div data-count="9" class="col-xs-6 col-lg-4">09</div>
	<div data-count="10" class="col-xs-6 col-lg-4">10</div>
	<div data-count="11" class="col-xs-6 col-lg-4">11</div>
	<div data-count="12" class="col-xs-6 col-lg-4">12</div>
	<div data-count="1" class="col-xs-6 col-lg-4">01</div>
	<div data-count="2" class="col-xs-6 col-lg-4">02</div>
	<div data-count="3" class="col-xs-6 col-lg-4">03</div>
	<div data-count="4" class="col-xs-6 col-lg-4">04</div>
	<div data-count="5" class="col-xs-6 col-lg-4">05</div>
	<div data-count="6" class="col-xs-6 col-lg-4">06</div>
	<div data-count="13" class="col-xs-6 col-lg-4">13</div>
</div>

надо получить такую структуру?
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<div id="list">
	<div data-count="1" class="col-xs-6 col-lg-4">01</div>
	<div data-count="2" class="col-xs-6 col-lg-4">02</div>
	<div data-count="3" class="col-xs-6 col-lg-4">03</div>
	<div data-count="4" class="col-xs-6 col-lg-4">04</div>
	<div data-count="5" class="col-xs-6 col-lg-4">05</div>
	<div data-count="6" class="col-xs-6 col-lg-4">06</div>
	<div data-count="7" class="col-xs-6 col-lg-4">07</div>
	<div data-count="8" class="col-xs-6 col-lg-4">08</div>
	<div data-count="9" class="col-xs-6 col-lg-4">09</div>
	<div data-count="10" class="col-xs-6 col-lg-4">10</div>
	<div data-count="11" class="col-xs-6 col-lg-4">11</div>
	<div data-count="12" class="col-xs-6 col-lg-4">12</div>
	<div data-count="13" class="col-xs-6 col-lg-4">13</div>
</div>


А CSS-стили сами расставят нужное число колонок.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
25.02.2015, 17:35
    #38888776
poiuytrewq
poiuytrewq
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JavaScript/jQuery сортировка элементов DOM
CSS делают колонки, но каждый элемент имеет свойство flost: left, т.е. каждый следующий прикрепляется к элементу слева от него, поэтому, порядок должен быть соответствующий
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.02.2015, 17:23
    #38889825
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JavaScript/jQuery сортировка элементов DOM
poiuytrewqЗадача отсортировать элементы так, чтобы "на выходе" вывод в три колонки выглядел так
Код: sql
1.
2.
3.
4.
5.
1	6	11
2	7	12
3	8	13
4	9	
5	10

Ну, и в две соответственно так
Код: sql
1.
2.
3.
4.
5.
6.
7.
1	8
2	9
3	10
4	11
5	12
6	13
7


 
Так?   (специально сделал data-count с шагом НЕ равным 1)
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>Сортировка элементов DOM</title>
<style>
.col-xs-6{
	border:1px solid #ccc;
	margin:10px;
	width:400px;
	height:50px;
	float:left;
}
</style>
</head>

<body>
<div id="list">
	<div data-count="70" class="col-xs-6 col-lg-4">070</div>
	<div data-count="80" class="col-xs-6 col-lg-4">080</div>
	<div data-count="90" class="col-xs-6 col-lg-4">090</div>
	<div data-count="100" class="col-xs-6 col-lg-4">100</div>
	<div data-count="110" class="col-xs-6 col-lg-4">110</div>
	<div data-count="120" class="col-xs-6 col-lg-4">120</div>
	<div data-count="10" class="col-xs-6 col-lg-4">010</div>
	<div data-count="20" class="col-xs-6 col-lg-4">020</div>
	<div data-count="30" class="col-xs-6 col-lg-4">030</div>
	<div data-count="40" class="col-xs-6 col-lg-4">040</div>
	<div data-count="50" class="col-xs-6 col-lg-4">050</div>
	<div data-count="60" class="col-xs-6 col-lg-4">060</div>
	<div data-count="130" class="col-xs-6 col-lg-4">130</div>
</div>

<script>
SetColumns();
window.onresize = function() {SetColumns();}

function SetColumns() {
	var lst = document.getElementById('list');

	for (i=0; i<lst.children.length; i++) { // Удаляем лишние DIV
		var el = lst.children[i];
		if (el.getAttribute('data-count') > 1000000) {lst.removeChild(el); i--;}
	}

	el = lst.children[0];
	var compStyle = getComputedStyle(el,'');
	var cols = lst.offsetWidth/(el.offsetWidth + parseInt(compStyle.marginLeft,10) + parseInt(compStyle.marginRight,10)) ^0; // ^0 - это отбросить дробную часть

	var rows = lst.children.length/cols ^0 + 1; // ^0 - это отбросить дробную часть

	var data = [].slice.call(document.querySelectorAll('#list > div'), 0); // получаем массив
	while (data.length < rows*cols) {
		var d = document.createElement('div');
		d.className = 'col-xs-6 col-lg-4';
		d.setAttribute('data-count', (data.length+1) * 1000000);
		d.style.border = '1px solid transparent';
		//d.innerHTML = 'New ' + (data.length+1) * 1000000; // Для отладки
		data.push(d);
		lst.appendChild(d);
	}

	data.sort(function(a,b) {
		a = parseInt(a.getAttribute('data-count'),10);
		b = parseInt(b.getAttribute('data-count'),10);
		return a-b;
		}
	);

	lst.innerHTML = '';

	var k = 1;
	for (i=1; i<=rows; i++) {
		for (j=1; j<=cols; j++) {
			if (j==1) {k = i;} else {k = k + rows;}
			lst.appendChild(data[k-1]);
		}
	}
}
</script>
</body>
</html>

...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JavaScript/jQuery сортировка элементов DOM / 4 сообщений из 4, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 419ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1446231]:
 0ms
get settings:
 4ms
get forum list:
 10ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 164ms
get topic data:
 6ms
get forum data:
 2ms
get page messages:
 22ms
get tp. blocked users:
 1ms
others: 206ms
total:  419ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]