Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.10.2014, 16:53
Аспирант
Отправить личное сообщение для diakon Посмотреть профиль Найти все сообщения от diakon
 
Регистрация: 28.09.2009
Сообщений: 49

Вывод изображений
Добрый день!
Подскажите код, который позволил бы вывести изображени таким видом
http://clip2net.com/s/jc4Nmc
Т.е. картинки раставляются и подгоняются под ширину блока
Заранее спасибо всем, кто подскажет такой скрипт
Ответить с цитированием
  #2 (permalink)  
Старый 31.10.2014, 17:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

diakon,
http://masonry.desandro.com/
Ответить с цитированием
  #3 (permalink)  
Старый 01.11.2014, 02:49
Аспирант
Отправить личное сообщение для diakon Посмотреть профиль Найти все сообщения от diakon
 
Регистрация: 28.09.2009
Сообщений: 49

Да нет, вот такое как делается?
Я все не могу придумать
http://clip2net.com/s/jcgRiK
Совсем голову сломал уже
Ответить с цитированием
  #4 (permalink)  
Старый 01.11.2014, 14:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

diakon,

http://tympanus.net/Development/AutomaticImageMontage/
Ответить с цитированием
  #5 (permalink)  
Старый 01.11.2014, 20:30
Аспирант
Отправить личное сообщение для diakon Посмотреть профиль Найти все сообщения от diakon
 
Регистрация: 28.09.2009
Сообщений: 49

Сообщение от рони Посмотреть сообщение
diakon,

http://tympanus.net/Development/AutomaticImageMontage/
О! Спаибо Вам!!!
Ответить с цитированием
  #6 (permalink)  
Старый 02.11.2014, 18:33
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Вот так оно делается правильно, без "центрируем" https://www.google.com/search?hl=en&...Z4M#im gdii=_
Ответить с цитированием
  #7 (permalink)  
Старый 02.11.2014, 18:35
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Сообщение от рони Посмотреть сообщение
diakon,

http://tympanus.net/Development/AutomaticImageMontage/
Глючная либа.
Ответить с цитированием
  #8 (permalink)  
Старый 03.11.2014, 03:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

макет автоматической подгонки с помощью css flex
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 body{
   margin: 0px;
 }

.block_info {
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: row;
  align-content: flex-start ;
  display:-webkit-flex;
  -webkit-flex-wrap: wrap-reverse;
  -webkit-flex-direction: row;
  -webkit-align-content: flex-start ;
  margin: 0;
   background: #EEEEEE;
    margin-top: -151px;
}

.block_info img {
  display: inline-flex;
  height: 150px;
  flex:  1 1 auto;
  -webkit-flex:  1 1 auto;
  width: auto;
  max-width: 400px;
  border:   transparent 1px solid;
  border-radius: 2px;
}

.block_info img:nth-last-child(-n+5) {
    flex:  0 1 auto;
    -webkit-flex:  0 1 auto;
}  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 $(function() {
         var s = $(".block_info"),
             b = $('.foto');

         function more() {
             $.each(Array(Math.round(Math.random() * 50 + 11)), function(indx, element) {
                 $('<img/>', {
                     'src': 'http://tympanus.net/Development/AutomaticImageMontage/images/' + (Math.round(Math.random() * 50 + 1)) + '.jpg'
                 }).prependTo(s)
             });
         }
         b.click(more);
         more()
     });
  </script>
</head>

<body>
<div class="block_info"></div>
<input name="" type="button" value="more" class="foto">
</body>
</html>

Последний раз редактировалось рони, 03.11.2014 в 04:00.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вывод изображений из папок Dark_Delphin Серверные языки и технологии 9 23.07.2014 14:54
вывод изображений, вместо прописывание img Alina25 Элементы интерфейса 1 01.04.2013 21:25
Вывод в слайдере изображений из определенной рубрики Rudamak Элементы интерфейса 16 03.07.2012 00:19
Вывод изображений и описания при выборе пункта select gustovskiy Элементы интерфейса 31 28.11.2010 01:17
Автоматический вывод всех изображений Stalker Общие вопросы Javascript 5 10.07.2009 13:27