Показать сообщение отдельно
  #1 (permalink)  
Старый 14.10.2012, 14:22
Новичок на форуме
Отправить личное сообщение для dempfi Посмотреть профиль Найти все сообщения от dempfi
 
Регистрация: 12.03.2012
Сообщений: 1

абсолютное позиционирование каждого элемента
Задача. добиться вот такого расположения элементов. придумал каждый элемент абсолютно позиционировать. но вот какой-то косяк и я не знаю почему, но высоту не получается брать.


HTML. у всех Li position absolute
<body>	
		<div id="access">
			<ul class="access_cont">
				<li class="acces">
				I much regret that want of space prevents my having the satisfaction of acknowledgin
				I much regret that want of space prevents my having the satisfaction of acknowledginI much regret that want of space prevents my having the satisfaction of acknowledgin
				</li>

				<li class="acces">
				I much regret that want of space prevents my having the satisfaction of acknowledgin
				I much regret that want of space prevents my having the satisfaction of acknowledginI much regret that want of space prevents my having the satisfaction of acknowledgin
				I much regret that want of space prevents my having the satisfaction of acknowledginI much regret that want of space prevents my having the satisfaction of acknowledgin
				</li>	
				
				<li class="acces">
				I much regret that want of space prevents my having the satisfaction of acknowledgin
				I much regret that want of space prevents my having the satisfaction of acknowledgin
				I much regret that want of space prevents my having the satisfaction of acknowledgi			
				</li>				
			</ul>
		</div><!--access-->
	
	</body>

$(document).ready(function(){
access()
});


function access(){
	var acces_cont 		= $('ul.access_cont'),//контейнер
		acces 			= $('ul.access_cont').children('li.acces'),//ли с которым работать
		windowWidth 	= $(window).width(),//понятно
		acces_num		= acces.length,//количество ли
		acces_visnum	= Math.round(windowWidth/320).toFixed(0);//сколько ли по ширине влезет в окно при ширине каждого ли в 320
	 
	acces_cont.css('width', acces_visnum*320);//ширина контейнеру, чтобы центрировать его(пока  не реализовано)

	for (var i = 0; i <= acces_num; i++) {//походим по всем ли
		var str = i-acces_visnum,//если ли из тех, что отображаются в первой строке 
		
		
		prevacces = acces.eq(i-acces_visnum),//высота и отступ сверху у ли который оказывается вт окне браузера над тем с которым мы сейчас работаем
		hg		  = prevacces.height(),//высота
		tip		  = prevacces.position().top,//отступ
		style	  = {//объект свойств
			left: req(str, acces_visnum)*320,//рекурсивная функция для переноса того ли, который уходит вправо(за экран) на следующую строку
			top: hg+tip+42//отступ сверху
		}
		
		
		if(str<0){//если первая строка
			acces.eq(i).css({left: i*320})
		}
		else{//если нет
			acces.eq(i).css(style)//высота и отступ слева в котором рекурсивная функция
			alert('uuu')
		}
		
		
		function req(a,b){//рекурсивная функция
			if (a<b){//если ли попадает на экран 
				return a;//то его и возвращаем
			}
			else{//если нет
				c=a-b;//делаем сдвиг назад на величину возможного отображеия эллементов
				return req(c,b);//рекурсивно вызываем сами себя чтобы проверить
			}//по сути мы узнаем тут какой ставить отступ слева, чтобы не уйти за экран
		}
    }
}
Ответить с цитированием