Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.02.2017, 09:07
Новичок на форуме
Отправить личное сообщение для Vl@dimir Посмотреть профиль Найти все сообщения от Vl@dimir
 
Регистрация: 15.02.2017
Сообщений: 1

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

...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Анимация картинок с удалением, при выходе за пределы окна браузера Delagardi jQuery 3 13.05.2016 17:39
Параметр width в зависимости от ширины браузера skymakc Элементы интерфейса 3 19.04.2014 16:03
Смена картинок в зависимости от положения курсора мыши antonio_vrn Events/DOM/Window 3 31.05.2011 22:07
Динамическое получение ширины и высоты окна браузера Esseron Элементы интерфейса 2 04.04.2011 16:00
Добавление нужного css-файла в html страницу в зависимости от ширины окна браузера UglyDemon Общие вопросы Javascript 1 24.12.2010 10:30