Применение js для верстки - оправданно ли?

Добрый день. Необходимо мнение профессионалов верстки.

Имею на руках сверстанный макет (к сожалению, я не имею права сейчас его показывать, но приложу внешний вид той области, о которой идет речь - ссылка). В js файле присутствует такая конструкция:

$(".promo-country-photos .row").each(function(){

var itemsCount = $(this).find(".item").length;

var itemWidth = 195;

$(this).css({width: itemsCount*itemWidth + "px"});

});

Приемлимо ли использование JS в верстке или это костыль?

Спасибо

zolotukhin, трудно сказать точно, насколько это оправданно, не видя контекст, но, возможно, и не было необходимости.

Сдается мне это динамическое определение ширины элемента в зависимости от количества. Елочку чтоли строите?

HTML:

<div class="promo-country-photos">

    <div class="items clearfix">

        <div class="row first">

            <div class="item floater"><a href="#"><img src="3.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="1.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="2.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="3.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="1.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="2.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="3.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="1.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="2.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="3.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="1.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="2.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="3.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="1.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="2.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="3.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="1.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="2.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="3.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="1.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="2.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="3.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="1.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="2.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="3.jpg"></a></div>

        </div>

        <div class="row second">

            <div class="item floater"><a href="#"><img src="1.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="2.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="3.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="1.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="2.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="3.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="1.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="2.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="3.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="1.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="2.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="3.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="1.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="2.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="3.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="1.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="2.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="3.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="1.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="2.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="3.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="1.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="2.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="3.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="1.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="2.jpg"></a></div>

            <div class="item floater"><a href="#"><img src="3.jpg"></a></div>

        </div>

    </div>

</div>

Цитата ("kriptograf"):

Сдается мне это динамическое определение ширины элемента в зависимости от количества. Елочку чтоли строите?

Про динамическое определение верно. По ссылке выше видно как это должно отображаться - два ряда картинок

Без исходного кода трудно сказать оправдано или нет. Если ширина

$(".promo-country-photos .row")

известна всегда (и можно один раз ее записать в css) — не оправдано. Если ширина эта не известна и меняется динамически от каких-то других данных (кол-ва item*195) — оправдано. Вопрос еще в том, нужна ли .row выставленная ширина? Если писался этот скрипт, вероятней всего нужна. Можно допустить, что нужна другому скрипту (слайдеру или галерее) управляющему этими row и items.

Ну так а в чем проблема? Вполне возможно что у вас элемены подгужаются динамически или еще может быть масса причин по которой верстку обрабатываем на клиенте. Так что все ок.
P.S. Поймите одно отичие. Есть скрипты серверные, а есть клиентские. В вашем случае скрипт клиентсткий. А оправдано или нет судить вам. Есть вероятность что можно обработать эти данные и на сервре где генерируется страница.

В самом простом виде, ширина по подобному алгоритму (по ширине контента) определяется посредством цсс на раз-два. Но иногда нужны финты, нужно знать побочные эффекты некоторых свойств, и для неопытного верстальщика проще так, скриптиком.
С другой стороны, мы все-равно не видим полной картины, возможно, что-то есть веские аргументы вычислять ширину именно так.

Цитата ("floppox"):

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

Золотые слова, Елена!