Есть набор картинок в дивах, все картинки либо 170, либо 270 px. После каждой отступ 30px. В сумме,когда набирается ширина блока-родителя, нужно обрезать у последней отступ. Это нужно для красивого отображения от начала границы и до нее, а так же для масштабирования на моб.устройствах.
Пример блока
<div class="gmenu-item">
<div class="gmenu-item-text-wrap"><h4>Боулинг</h4></div>
<a href="#"><div class="gmenu-item-hover"></div></a>
<img src="image/m06.jpg" alt="" />
</div>
CSS важен в данном случае только для обертки, остальное не влияет,т.к. либо не имеет параметров, либо абсолютно позиционировано.
.gmenu-item {
margin-bottom: 30px;
margin-right: 30px;
float: left;
position: relative;
}
И сам код. Это уже не первый вариант реализации, но думаю такой самый лучший. Тут вопрос скорее как при данной реализации сделать правильно,пробовал и без %, со сравнением длин, без толку.
var mgal = $(".menu-gallery img");
var iterMgalWidth = 0;
var itemMargin = 30;
for(var i = 0; i < mgal.length; i++){
//Копим из ширины картинки, +30 отсуп вправо из стилей, сравниваем с шириной контейнера-родителя и убираем у последней
iterMgalWidth = iterMgalWidth + mgal[i]["clientWidth"] + itemMargin;
if(!((iterMgalWidth-itemMargin) % maxWhCont)){
$(".menu-gallery .gmenu-item").eq(i).css({"margin-right" : 0});
}
}
UPD:
//Коллекция всех картинок, сброс
var mgal = $(".menu-gallery img");
var iterMgalWidth = 0;
var itemMargin = 30;
for(var i = 0; i < mgal.length; i++){
//Копим из ширины картинки, +30 отсуп вправо из стилей, сравниваем с шириной контейнера-родителя и убираем у последней
iterMgalWidth = iterMgalWidth + mgal[i]["clientWidth"] + itemMargin;
if((iterMgalWidth-(itemMargin*2)) == maxWhCont){
$(".menu-gallery .gmenu-item").eq(i).css({"margin-right" : 0});
iterMgalWidth = 0;
}
/*иной вариант
if(!((iterMgalWidth-itemMargin) % maxWhCont)){
$(".menu-gallery .gmenu-item").eq(i).css({"margin-right" : 0});
}*/
}
iterMgalWidth = 0;
