Как отобразить изображения по кругу?

Question

[jack3d]

Друзья, дизайнер нарисовал вот такой макет для вывода юзеров:


Я уже второй день не могу сообразить как лучше всего такое сверстать. Помогите, пожалуйста!

PS. Нашел решение тут: codepen.io/anon/pen/OVBqgO

Всем спасибо!

Answer 1

[Денис Инешин]

Я бы не стал использовать JS, а просто заранее рассчитал бы координаты точек. При желании можно сделать это функцией на LESS/SASS.

Вот пример итоговой разметки: jsfiddle.net/IonDen/ck8rxtnz

Comments

[Роман Якушев]

не адаптивно. под мобильники в смысле. да и ширина блока может быть плавающей.

[Денис Инешин]

Роман Якушев: Ну дык, адавтивность это уже другой вопрос.

[Денис Инешин]

Роман Якушев: подумайте, зачем рассчитывать на клиенте, когда туже самую вашу функцию можно запустить при сборке LESS файла и рассчитать точки заранее. Можно даже для разных разрешений.

[jack3d]

Подскажите как рассчитать координаты для такого количества изображений

[jack3d]

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

[Денис Инешин]

jack3d: ну вот Роман Якушев написал функцию, используйте её при сборке проекта из LESS файла.
Например вот так: lesscss.org/features/#loops-feature
Как вообще собирать проект: nano.sapegin.ru/all/grunt-0-4

[Денис Инешин]

jack3d: координаты можно хоть вручную посчитать, тут же довольно простая геометрия. Загуглите углы, синусы и косинусы и вы поймете как посчитать точку на окружности.

Answer 2

[Роман Якушев]

Только javascript.
Я делал на jquery:

var $c_elems = $('.moduletable_circle').find('li');
		var c_count = $c_elems.length;
		var c_delta = Math.PI * 2 / c_count;
		var c_x = $('#sec2').outerWidth()/2; 
console.log('c_x=',c_x);
		var c_y = $('#sec2').outerHeight()/2; 
console.log('c_y=',c_y);
		var c_angle = 0;
		var c_left;
		var c_top;
		var c_dlin= 270;
		
		for (var i = 0; i < c_count; i++) {
			c_left = c_dlin * Math.cos(c_angle) + c_x + 'px';
			c_top = c_dlin * Math.sin(c_angle) + c_y + 'px';
			
			$c_elems.eq(i).css({
				'position':'absolute',
				'left':c_left,
				'top':c_top
			});

			c_angle += c_delta;
		}

при этом элементы должны быть position: absolute;

html:

<div class="moduletable_circle"> 
	<div id="sec2" style="position: relative;">
		<ul>
			<li></li>
			<li></li>
		</ul>
	</div>
</div>

Comments

[jack3d]

Спасибо за ответ! Напишите, пожалуйста, html-разметку.

[Роман Якушев]

jack3d: вроде у меня было так. И это один круг. Вам же необходимо 3 таких. только внутри одного контейнера. т.е. 3 ul