Код позволяет в зависимости от ширины экрана выводить разное количество товаров (пример
http://www.ozon.ru/) в строке. Т.е. на больших экранах в строке показывается 5 картинок, при уменьшении окна браузера количество картинок уменьшается. Шаблон сайта состоит из левой, правой колонки и по центру (<div id="content">) показываются картинки. При уменшении окна браузера до размера смартфона убираются левая и правая колонки, соответственно размер центральной части увеличивается (<div id="content_xs">). При увеличении центральной части скрипт не работает корректно (не выравниваются картинки по центру). Как я понял, это связано с тем, что скрипт ширину экрана в первый раз уже расчитал (для <div id="content">). Посоветуйте, как сделать, чтобы скрипт работал для обоих случаев (div-ов)? Надеюсь понятно изложил вопрос.
<style>
#new_goods { margin:0 -3px; height:264px; overflow:hidden;}
#new_goods2 { margin:0 -3px; height:264px; overflow:hidden;}
.item {float:left; height:264px; min-width:180px;}
.border { margin:5px; height:264px;}
.columns1 .item{width:100%}
.columns2 .item{width:50%}
.columns3 .item{width:33%}
.columns4 .item{width:25%}
.columns5 .item{width:20%}
.columns6 .item{width:20%}
.columns7 .item{width:20%}
.columns8 .item{width:20%}
</style>
<script type="text/javascript" charset="utf-8">
window.onresize = CountColumnsAndSetClass1;
window.onload = CountColumnsAndSetClass1;
// Присваиваем нужный класс для блока new_goods (columns1, columns2, columns3 ... )
function CountColumnsAndSetClass1(){
var c=Math.floor(document.getElementById('new_goods').offsetWidth/(185)); // число - это максимальная ширина блока
cc = c>0?c:1; //кол-во колонок
document.getElementById('new_goods').className = 'columns' + cc;
//ShowUsScreenWidth();
var c2=Math.floor(document.getElementById('new_goods2').offsetWidth/(185));
cc2 = c2>0?c2:1;
document.getElementById('new_goods2').className = 'columns' + cc2;
}
</script>
...
<span class='hidden-xs'>
<div id="content">
<div id="new_goods" class="">
<table style="text-align: center; vertical-align: top; width: 100%;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr><td>картинка1, название1, цена1</td></tr>
<tr><td>картинка2, название2, цена2</td></tr>
<tr><td>картинка3, название3, цена3</td></tr>
<tr><td>картинка4, название4, цена4</td></tr>
<tr><td>картинка5, название5, цена5</td></tr>
</tbody>
</table>
</div><!-- #new_goods-->
</div><!-- #content-->
</span>
<span class='visible-xs'>
<div id="content_xs">
<div id="new_goods2" class="">
<table style="text-align: center; vertical-align: top; width: 100%;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr><td>картинка1, название1, цена1</td></tr>
<tr><td>картинка2, название2, цена2</td></tr>
<tr><td>картинка3, название3, цена3</td></tr>
<tr><td>картинка4, название4, цена4</td></tr>
<tr><td>картинка5, название5, цена5</td></tr>
</tbody>
</table>
</div><!-- #new_goods2-->
</div><!-- #content-->
</span>
...
