Адаптировать произвольный код размещения изображения для гибкой компоновки

Question

Я ищу эффект очень похож на это:

http://jsfiddle.net/G5Xrz/

function rnd(max) { return Math.floor(Math.random()*(max+1)) } 

function showImage(container, maxwidth, maxheight, imgsrc, imgwidth, imgheight) { 
var id = "newimage" + rnd(1000000); 
$(container).append(
    "<img id='" + id + "' src='" + imgsrc + 
    "' style='display:block; float:left; position:absolute;" + 
    "left:" + rnd(maxwidth - imgwidth) + "px;" + 
    "top:" + rnd(maxheight - imgheight) + "px'>"); 
$('#' + id).fadeIn(); 
return id; 
} 

setInterval(
function() { 
    showImage("#container", 400, 600, 
       "http://placekitten.com/" + (90 + rnd(10)) + "/" + (90 + rnd(10)), 
       100, 100); 
}, 700); 

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

Следующий фрагмент кода, кажется, есть более подходящий способ генерации случайных позиций:

http://jsfiddle.net/Xw29r/15/

function makeNewPosition(){ 

// Get viewport dimensions (remove the dimension of the div) 
var h = $(window).height() - 50; 
var w = $(window).width() - 50; 

var nh = Math.floor(Math.random() * h); 
var nw = Math.floor(Math.random() * w); 

return [nh,nw];  

} 

function animateDiv(){ 
var newq = makeNewPosition(); 
var oldq = $('.a').offset(); 
var speed = calcSpeed([oldq.top, oldq.left], newq); 

$('.a').animate({ top: newq[0], left: newq[1] }, speed, function(){ 
    animateDiv();   
}); 

}; 

Однако я очень много новичков с яваскрипт и я не знаю, как их сочетать.

Может ли кто-нибудь помочь?

Благодаря

Answer 1

Возьмите эту часть из второго кода:

и использовать эти переменные h и w с высоты браузера и ширины (минус 50) в качестве соответствующих параметров в этой части первый код:

setInterval(
function() { 
    showImage("#container", 400, 600, 
       "http://placekitten.com/" + (90 + rnd(10)) + "/" + (90 + rnd(10)), 
       100, 100); 
}, 700); 

Кроме того, первый код имеет этот HTML:

<div id="container" style="width:400px; height:600px; background: green; position:relative"></div> 

Это жестко кодирует высоту и ширину при значениях пикселей. Вы можете использовать процентное значение CSS, чтобы ширина отвечала размеру родительского контейнера. Однако вам понадобится JS для правильной настройки высоты; процент на высоту не делает ничего

Собираем все вместе (и удаление "минус 50" часть), вы получите это:

jsFiddle demo

<div id="container" style="width:100%; height:100px; background: green; position:relative"></div> 

function adjustContainerHeight(height) { 
    $('#container').height(height); 
} 

adjustContainerHeight($(window).height()); 

setInterval(
    function() { 
     var h = $(window).height(); 
     var w = $(window).width(); 
     adjustContainerHeight(h); 
     showImage("#container", w, h, 
        "http://placekitten.com/" + (90 + rnd(10)) + "/" + (90 + rnd(10)), 
        100, 100); 
    }, 700); 

Это обновляет высота контейнера при первой загрузке страницы и еще раз при размещении случайного изображения. Более надежный код будет иметь отдельный обработчик событий, регулирующий высоту, который обновляет высоту всякий раз, когда изменяется размер страницы.