Можно ли использовать jQuery / javascript, чтобы разместить DIV несколько раз каждые x пикселей - PullRequest
Новая
       13

Можно ли использовать jQuery / javascript, чтобы разместить DIV несколько раз каждые x пикселей

1 голос
/ 27 июля 2011

Моя проблема в этом.У меня есть DIV, который копирует изображение с помощью CSS3.Этот Div нужно повторять с установленным интервалом вниз по одной стороне страницы.Т.е. каждые 200px.Есть ли способ для этого быть автоматизированным.Обычно я бы использовал повторяющийся bgimage, но в этом случае изображения не допускаются.Я также мог бы повторять каждый раз div, но это большая страница, которая будет часто обновляться с большим количеством контента.

Ответы [ 5 ]

2 голосов
/ 27 июля 2011

Я бы сделал это так:

высота документа / высота элемента + 200px = x поместите элемент X раз в ваш документ.

Вот и все.

Говорят в jQuery это выглядит так:

попробуйте здесь: http://jsfiddle.net/aF68z/

var repeatMe = function ( $o, space ){
  var oHeight,dHeight, multiplicator, res, html, $parent;

  dHeight = $(document).height(); //height of you document
  oHeight = $o.height(); //height of the element that shoud repeat 
  multiplicator = Math.floor(dHeight / (oHeight + space)); //how many time the element can repeat (including the margin)
  $parent = $o.parent(); //gets the parent that finally will hold all repeating items
  html = $parent.html(); //gets the HTML code of the element that repeats

  /* appending and cloning are very CPU heavy and it makes no sense to do so only for a visual matter, "string" + "string" etc... is very slow if the string becomes long, this is a simple trick how to avoid this: */
  res = [];  
  for (var i = 0; i < multiplicator; ++ i) {
    res.push(html);
  }
  html = res.join("");


  $parent.html(html); //appending the HTML of the all the repeated elements to the parent again.
};

repeatMe( $("div.deco div:eq(0)"),200 );

PS: По крайней мере, попробуйте что-нибудь самостоятельно в следующий раз.

0 голосов
/ 27 июля 2011

Если я не ошибаюсь в вашем вопросе, это может быть полезно. 

var times = 10;
var elementToRepeat = $('.myDiv'); 
var lastElement = elementToRepeat;
for(var i = 0 ; i < times ; times++){
   var newElement = elementToRepeat.clone();
   lastElement.after(newElement);
   lastElement = newElement;
}

Кроме того, установите нижнюю границу для класса div, чтобы у них было желаемое разделение.

0 голосов
/ 27 июля 2011

Использование 

.yourClass{
       width:200px;
       height:yourHeightValue;
}
.imgClass{
       text-align:center;
}

и добавьте столько <div class="yourClass"><img class="imgClass" src="..."/></div>, сколько вам нужно.

0 голосов
/ 27 июля 2011

Если вам нужно переварить div по вертикали, вы можете сделать: 

.yourClass{
       height:200px;
       width:whatyouwant;
}

var numberOfDivs = 8;//chose the number you want or calculate it
var div = $('<div>', {class: 'yourClass'});//create your div
for (i=0; i < numberOfDivs ; i++){
     $('.leftSidebar').append(div);
}
0 голосов
/ 27 июля 2011 
$('.myDiv').append($('.myDiv').clone())

и задайте для div стиль нижнего поля 200px

РЕДАКТИРОВАТЬ: Для тех, кто компилирует, что это не цикл и вложенные Div 

for(i=0;i<10;i++)
{
    $('.myDiv').after($('.myDiv').clone().removeClass('myDiv')) 
}
...