Выведение рандомных картинок

@WWWWWWolf · Регистрация: 16.03.2011

Студворк — интернет-сервис помощи студентам

Пишу для себя один мелкий сайтик. JS не знаю и до сих пор обходилась хтмлом, но очень захотелось сделать одну фичу.

Есть куча маленьких квадратных картинок с соответствующей каждой сылкой. 32х32 пикселя. Нужно, чтобы при каждой загрузке страницы поле фиксированного размера, например 32х20 рандомно заполнялось этими картинками. На странице больше ничего не будет, так что можно размахнуться.

Желательно, но не обязательно:
без повторов.
сделать в таблице так, чтобы если картинок меньше, чем ячеек, то они размещаются в также рандомных ячейках

Помогите, кому не лень?

@kalabuni · 24.07.2012, 11:55

Для случая, если выполняются ВСЕ нижеперечисленные условия:

-- все картинки хранятся в одной папке (например, в папке pictures);
-- картинок ровно 500 штук и все они поименованы по какой-то схеме (например, по схеме от pic0.gif до pic499.gif)
-- имя каждой картинки строго завязано на URL ссылки, куда эта картинка ведёт (например, для картинки pic123.gif ссылкой будет httр://site.ru/page123.html)
-- надо вывести 400 неповторяющихся картинок в виде таблицы "20 штук на 20 штук"

То тогда вариант скрипта может быть таков:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
<center>
 
<script>
for (var arr = [], j = 0; j < 500; j++) arr [j] = j;
arr.sort (new Function ('x', 'y', 'return Math.random () - Math.random ()'));
for (var rez = [], j = 0; j < 400; j++)
   {
   rez [j] = '<img src="pic' + arr [j] + '.gif" style="cursor: pointer" onclick="document.location.href = \'http://site.ru/page' + arr [j] + '.html\'">';
   if (!((j + 1) % 20)) rez [j] += '<br>';
   }
document.write (rez.join (''));
</script>
 
</center>
</body>

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

@WWWWWWolf · 24.07.2012, 14:31 **[ТС]**

Огромное спасибо. Почти то, что надо. Только вот у меня нету 500 картинок и страниц. Пока их 10, но я постоянно буду добавлять новые, планы на несколько сотен.
И хорошо бы, чтобы имена были не однотипные. Например, хорошо бы, чтобы я просто создавала документ со строчками вида

HTML5
1
2
3
<a href='qwerty.html><img src='rtyu.gif'></a>
<a href='www.wvhj.ru><img src='rtyf.gif'></a>
<a href='qsdfty.html><img src='rsdf.png'></a>

а скрипт оттуда брал бы по строке и помещал их в рандомном порядке.
Тогда могу и заделать пропуски просто пустыми картинками и вообще все проблемы решатся.

Ну или не отдельным файлом. Не знаю, как в JS легче, просто хотелось бы вставляемые куски кода вкучную редактировать, ибо кое где будут не просто картинки, а, например, меняться они будут, или дрожать, музыку при наведении проигрывать и т.д. (эти скрипты есть)
Вот нерандомный вариант, который пока стоит: http://10.176.2.222:2222/

@kalabuni · 25.07.2012, 01:02

WWWWWWolf, я понимаю, что вам сложно - вы даже с собственным полом ещё не определились: то вы - женщина, которая "просто создавала документ", то вы - мужик, который "брал бы по строке и помещал"...

Но всё же... я уже вам указывал, что (повторяю): "скрипт написать тоже можно, только для этого надо знать точное описание этих ваших условий".

@WWWWWWolf · 25.07.2012, 18:46 **[ТС]**

Сообщение от kalabuni

WWWWWWolf, я понимаю, что вам сложно - вы даже с собственным полом ещё не определились: то вы - женщина, которая "просто создавала документ", то вы - мужик, который "брал бы по строке и помещал"...

Но всё же... я уже вам указывал, что (повторяю): "скрипт написать тоже можно, только для этого надо знать точное описание этих ваших условий".

Я девушка.
Я же в прошлом сообщении написала. Файл со строками хтмл. Нужно, чтобы страница в рандомном порядке вставляла в себя n строк. Желательно без повторов.

@kalabuni · 26.07.2012, 11:01

Понятно, что есть у вас N картинок-ссылок.
Понятно, что хотите вы сделать самый примитивный ввод на страницу этих своих N картинок-ссылок.

Непонятно следующее: каким по размеру вы хотите иметь поле (таблицу) для рандомного вывода этих N картинок ссылок.
Каково соотношение между количеством ячеек поля вывода и N?

Варианты:
а) ячеек в поле для вывода меньше или равно N -- тут вопросов нет
б) ячеек на поле больше, чем имеющихся N картинок-ссылок -- здесь неясно, чем заполнять "лишние" ячейки.

В общем, дайте точное описание формата вывода.
Типа такого: "выводить в виде таблицы 30 х 20, где в N ячейках - картинки-ссылки, в остальных - пробел",
либо - "выводить в виде таблицы J x K, где (J * K) <= N" или ещё как-то...

@proset · 26.07.2012, 14:13

кароче говоря делаешь так:
1)создаешь бд,в ней создаешь таблицу для картинок 2 поля (id картинки и picture название картинки) Navicat MySQL в помощь...дело 2х минут далее...
2)заполняешь эту таблицу (вбиваешь назавания картинок,которые хочешь выветсти) поле id ставишь автоинкримент (при создании таблицы) оно заполняется само
3)выводишь картинки в таблицу из бд вот таким вот нехитрым запросом

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table class = 'tableclass'>
    <tr>
            <?php 
    
$res = mysql_query("SELECT * FROM pictures" ,$db)
    or die(mysql_error());
    $i = 0; 
    while($row = mysql_fetch_assoc($res))
{
    
    printf("<td> <div class='yourclass'><img src='i/%s.jpg' width = '140px' height = '140px'  /></div></td>",$row["picture"]
     
$i = $i+1;
if($i == 4) {echo "</tr>";
$i = 0;}
    
}
?>
 
 </table>

выведет он тебе все картинки в таблицу и в зависимости от того,сколько картинок будет в базе,столько полей он и создаст....не нужно думать над колличеством полей и как добавить поле
yourtable необходимо заменить на название вашей таблицы с базы
ну соответственно классы дивов тоже на свое усмотрение
в данном коде один маленький нюанс:

PHP
1
2
3
4
5
$i = $i+1;
if($i == 4) {echo "</tr>";
$i = 0;}
    
}

сдесь я прописываю,сколько картинок должно быть в каждой строке (в данном случае у меня их 4)
%s -- выводит все содержимое из бд считывая параметр $row =["picture"] тоесть картинки

PHP
1
while($row = mysql_fetch_assoc($res))

пока содержимое есть в базе он его выводит в таблицу;
если вы хотите добавить новую картинку то просто добавляем её в папку для изображений (у меня это i) , создаем новое поле в таблице picture и вписываем туда название нужной картинки
НУ И ПОСЛЕДНЕЕ )сидим и радуемся,что все работает

не забываем подключить базу данных к нашему сайту)

@WWWWWWolf · 27.07.2012, 00:24 **[ТС]**

Поле не надо. Просто рандомно линейно вставляет n кусков кода. Если кусков меньше n, то останавливается. Если больше - оставшиеся можно оставить. Но чтобы каждый раз оставшиеся получались разные.

В общем так:
n-количество необходимых кусков
m-количество строк в файле
И то и другое вбивается вручную мною, чтобы n не было больше m сама прослежу.
Хотя проверку, не была ли уже эта строка, вероятно, и без тупого перебора можно сделать...

proset,

всего лишь... дело 2х минут... Видишь ли, я знаю только хтмл и могу читать js. А БД для такой простой задачи... Мне же смотреть страшно на твоё объяснение. Мне надо mysql для этого изучать. Это для тебя просто...

@kalabuni · 27.07.2012, 03:28

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script>
function rand ()
{
var STR = 3; // устанавливаете количество картинок в одной строке
 
var lnk = document.getElementById ('PicLink').getElementsByTagName ('A'),
    tBR = document.createElement ('BR');
for (var arr = [], j = 0, lj = lnk.length; j < lj; j++) arr [j] = j;
arr.sort (new Function ('x', 'y', 'return Math.random () - Math.random ()'));
for (j = 0; j < lj; j++)
   {
   document.body.appendChild (lnk [arr [j]].cloneNode (1));
   if (!((j + 1) % STR)) document.body.appendChild (tBR.cloneNode (0));
   }
}
</script>
</head>
<body onload="rand ()">
<div id="PicLink" style="display: none">
<a href="a1.html"><img src="i1.gif" onmouseover="this.style.background = 'red'"></a>
<a href="a2.html"><img src="i2.gif"></a>
<a href="a3.html"><img src="i3.gif"></a>
<a href="a4.html"><img src="i4.gif"></a>
<a href="a5.html"><img src="i5.gif"></a>
<a href="a6.html"><img src="i6.gif"></a>
<a href="a7.html"><img src="i7.gif"></a>
</div>
</body>
</html>

Одну из картинок (первую) для примера снабдил функцией, чтобы вы удостоверились, что при рандомном выводе функция "перенесётся".

@proset · 27.07.2012, 08:13

Сообщение от WWWWWWolf

Поле не надо. Просто рандомно линейно вставляет n кусков кода. Если кусков меньше n, то останавливается. Если больше - оставшиеся можно оставить. Но чтобы каждый раз оставшиеся получались разные.

В общем так:
n-количество необходимых кусков
m-количество строк в файле
И то и другое вбивается вручную мною, чтобы n не было больше m сама прослежу.
Хотя проверку, не была ли уже эта строка, вероятно, и без тупого перебора можно сделать...

proset,

всего лишь... дело 2х минут... Видишь ли, я знаю только хтмл и могу читать js. А БД для такой простой задачи... Мне же смотреть страшно на твоё объяснение. Мне надо mysql для этого изучать. Это для тебя просто...

хм...первый раз вижу человека,которому легче разобратьсяс js чем с mysql ))

да и ктому же,код я уже кинул)тебе лишь остается описать 2 класса в ксс)

@WWWWWWolf · 27.07.2012, 18:42 **[ТС]**

kalabuni, то, что нужно! спасибо огромное.
А почему <center> не действует на вот это всё?

proset, не вижу ничего сложного в JS, если знаешь один любой язык, мне лично просто синтаксис учить влом, учебника нормального не найду. Но подкорректировать скрипт под себя, или собрать, беря пример с других мне не сильно сложно. А вот что такое mysql даже примерно не знаю.

@kalabuni · 27.07.2012, 20:01

WWWWWWolf, пропишите между </div> и </body> тег

<center id="cnt"></center>

И в строке #15 моего кода замените body на document.getElementById ('cnt')

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@WWWWWWolf 0 / 0 / 1 Регистрация: 16.03.2011 Сообщений: 16

	Выведение рандомных картинок 24.07.2012, 10:43. Показов 19698. Ответов 11 Метки нет (Все метки) Пишу для себя один мелкий сайтик. JS не знаю и до сих пор обходилась хтмлом, но очень захотелось сделать одну фичу. Есть куча маленьких квадратных картинок с соответствующей каждой сылкой. 32х32 пикселя. Нужно, чтобы при каждой загрузке страницы поле фиксированного размера, например 32х20 рандомно заполнялось этими картинками. На странице больше ничего не будет, так что можно размахнуться. Желательно, но не обязательно: без повторов. сделать в таблице так, чтобы если картинок меньше, чем ячеек, то они размещаются в также рандомных ячейках Помогите, кому не лень? 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	25.07.2012, 01:02
	WWWWWWolf, я понимаю, что вам сложно - вы даже с собственным полом ещё не определились: то вы - женщина, которая "просто создавала документ", то вы - мужик, который "брал бы по строке и помещал"... Но всё же... я уже вам указывал, что (повторяю): "скрипт написать тоже можно, только для этого надо знать точное описание этих ваших условий". 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	26.07.2012, 11:01
	Понятно, что есть у вас N картинок-ссылок. Понятно, что хотите вы сделать самый примитивный ввод на страницу этих своих N картинок-ссылок. Непонятно следующее: каким по размеру вы хотите иметь поле (таблицу) для рандомного вывода этих N картинок ссылок. Каково соотношение между количеством ячеек поля вывода и N? Варианты: а) ячеек в поле для вывода меньше или равно N -- тут вопросов нет б) ячеек на поле больше, чем имеющихся N картинок-ссылок -- здесь неясно, чем заполнять "лишние" ячейки. В общем, дайте точное описание формата вывода. Типа такого: "выводить в виде таблицы 30 х 20, где в N ячейках - картинки-ссылки, в остальных - пробел", либо - "выводить в виде таблицы J x K, где (J * K) <= N" или ещё как-то... 1

@WWWWWWolf 0 / 0 / 1 Регистрация: 16.03.2011 Сообщений: 16
	27.07.2012, 00:24 [ТС]
	Поле не надо. Просто рандомно линейно вставляет n кусков кода. Если кусков меньше n, то останавливается. Если больше - оставшиеся можно оставить. Но чтобы каждый раз оставшиеся получались разные. В общем так: n-количество необходимых кусков m-количество строк в файле И то и другое вбивается вручную мною, чтобы n не было больше m сама прослежу. Хотя проверку, не была ли уже эта строка, вероятно, и без тупого перебора можно сделать... proset, всего лишь... дело 2х минут... Видишь ли, я знаю только хтмл и могу читать js. А БД для такой простой задачи... Мне же смотреть страшно на твоё объяснение. Мне надо mysql для этого изучать. Это для тебя просто... Миниатюры 0

@WWWWWWolf 0 / 0 / 1 Регистрация: 16.03.2011 Сообщений: 16
	27.07.2012, 18:42 [ТС]
	kalabuni, то, что нужно! спасибо огромное. А почему <center> не действует на вот это всё? proset, не вижу ничего сложного в JS, если знаешь один любой язык, мне лично просто синтаксис учить влом, учебника нормального не найду. Но подкорректировать скрипт под себя, или собрать, беря пример с других мне не сильно сложно. А вот что такое mysql даже примерно не знаю. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	27.07.2012, 20:01
	WWWWWWolf, пропишите между </div> и </body> тег <center id="cnt"></center> И в строке #15 моего кода замените body на document.getElementById ('cnt') 1