Форум Сайтостроение Веб-строительство

Работа скрипта

A3
На сайте с 12.07.2014
Offline
20
abc3377
581

Код позволяет в зависимости от ширины экрана выводить разное количество товаров (пример 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>

...
S
На сайте с 30.09.2016
Offline
469
Sitealert
#1

Весьма странные манипуляции, однако.

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
Aisamiery
На сайте с 12.04.2015
Offline
316
Aisamiery
#2

Зачем вам всё это? Таблицы, JS?

Все куда проще, вот они товары


<div class="list">
  <div class="list__item list__item-1">Карточка товара 1</div>
  <div class="list__item list__item-2">Карточка товара 2</div>
  <div class="list__item list__item-3">Карточка товара 3</div>
  <div class="list__item list__item-4">Карточка товара 4</div>
  <div class="list__item list__item-5">Карточка товара 5</div>
</div>

<style media="screen">
  .list__item {float:left; width: 200px;}
  .list__item-2, .list__item-3, .list__item-4, .list__item-5 {display:none;}
  /* И погнали */
  @media (min-width: 400px) {
    .list__item-2 {display: block;}
  }
  @media (min-width: 600px) {
    .list__item-3 {display: block;}
  }
  @media (min-width: 800px) {
    .list__item-4 {display: block;}
  }
  @media (min-width: 1000px) {
    .list__item-5 {display: block;}
  }
</style>

Рабочий пример http://codepen.io/anon/pen/YNgZXJ

Разработка проектов на Symfony, Laravel, 1C-Bitrix, UMI.CMS, OctoberCMS

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий