JavaScript. Сетка изображений

261
26 апреля 2017, 11:51

Здравствуйте. Нужно создать сетку с изображениями (изображения выбираются рандомно), которая будет выводиться в div "pictures" после нажатия на кнопку. В JS я совсем не разбираюсь.

<script>
    var imgArr = new Array();
    imgArr[0] = new Image();
    imgArr[0].src = 'images/1.png';
    imgArr[1] = new Image();
    imgArr[1].src = 'images/2.png';
    imgArr[2] = new Image();
    imgArr[2].src = 'images/3.png';
    imgArr[3] = new Image();
    imgArr[3].src = 'images/4.png';
    imgArr[4] = new Image();
    imgArr[4].src = 'images/5.png';
    function myFunc() {
        for (var i = 0; i < rows; i++) {
            for (var j = 0; j < columns; j++) {
            }
        }
    }
</script>
<div>
    Rows: <input type="text" id="rows" />
    Columns: <input type="text" id="columns" /><br><br>
    <button onclick="myFunc();">Click</button>
</div>
<div id="pictures">
</div>
Answer 1

var imageBaseURL = 'http://scarlet.stanford.edu/scien/images/labsite/k0{INDEX}.bmp' 
  , imageCount = 9; 
 
(function($) { 
  $(function() { 
    var $rows = $('#rows') 
      , $cols = $('#columns') 
      , $container = $('#pictures'); 
    $('button').click(function() { 
      var rows = $rows.val() 
        , cols = $cols.val(); 
      if (rows > 0 && cols > 0) { 
        $container.empty(); 
        for (var row = 0; row < rows; ++row) { 
          for (var col = 0; col < cols; ++col) { 
            var index = Math.floor(Math.random() * imageCount) + 1 
              , image = $('<img/>').attr('src', imageBaseURL.replace('{INDEX}', index)); 
            col || image.addClass('clear'); 
            image.appendTo($container); 
          } 
        } 
      } 
    }); 
  }); 
})(jQuery);
#pictures img { 
  float: left; 
  height: 50px; 
  width: 50px; 
} 
 
#pictures img.clear { 
  clear: left; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div> 
  Rows: <input type="number" min="1" step="1" id="rows" /> 
  Columns: <input type="number" min="1" step="1" id="columns" /><br><br> 
  <button>Click</button><br><br> 
</div> 
<div id="pictures"></div>

READ ALSO
Тормозит приложение при наборе текста
javascript

Тормозит приложение при наборе текста

Есть приложение, использующее React в связке с Redux

 297
Как перекинуть данные в HTML таблицу? Не могу перекинуть данные с тегов в таблицу(
javascript

Как перекинуть данные в HTML таблицу? Не могу перекинуть данные с тегов в таблицу(

Немного модифицировал ваш код в сниппет, в котором видно, что после вызова open значение thisreadyState = 1, а после send значение this

 214
Ожидание результата выполнения
javascript

Ожидание результата выполнения

Всем привет!

 205
Сортировка по алфавиту. Помогите
javascript

Сортировка по алфавиту. Помогите

Суть задачи такова что в textarea вводятся ссылки, а функция должна вырезать из них "https://" и вернуть отсортированный список ссылокУдалить "https://"...

 305