임의의 숫자를 기준으로 이미지 확산

Question

사용자가 플러그인에 제공 한 X 및 Y 값에 따라 이미지를 페이지 전체에 퍼트리고 싶습니다. 현재는 전체 이미지 집합을 가져 와서 내가 얻은 최신 두 좌표에 막대로 배치합니다. 그러나 사용자가 정의한 영역에 이미지가 무작위로 퍼지기를 원합니다.

flickrJSONParse: function (response) { 
      $.each(response, function (item, i) { 
       $.each(i.photo, function (photoItem, ItemI) { 
        var URL = "http://farm" + ItemI.farm + ".staticflickr.com/" + ItemI.server + "/" + ItemI.id + "_" + ItemI.secret + "_b.jpg"; 
        var generated = $selector.append("<div class='item'><img class='image' src=" + URL + " alt=" + ItemI.title + " />" + "<a href='#' class='overlay'><h3 class='title'>" + ItemI.title + "</h3></a>" + "</div>"); 
        generated.css({ 
         position: "absolute", 
         left: Math.floor(Math.random()*(settings.Xmax-settings.Xmin+1)+settings.Xmin), 
         top: Math.floor(Math.random()*(settings.Ymax-settings.Ymin+1)+settings.Ymin) 
        }) 
       }); 
      }); 
     } 

위

내 코드, 그리고 아래에있는 내 CSS입니다 :

html, body, *{ 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-family: sans-serif; 
} 
html{ 
    overflow-y: scroll; 
} 

.item{ 
    position: relative; 
    float: left; 
    line-height: 1em; 
    display: inline; 
    width: 100%; 
    height: 100%; 
} 
.image{ 
    margin: 0; 
    width: 20%; 
    display: block; 
} 
.image:after{ 
    clear: both; 
} 
.overlay{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 20%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, .7); 
    text-decoration: none; 
    color: #FFF; 
    display: none; 
} 
.overlay .title{ 
    font-size: 1em; 
    text-align: center; 
} 
.item:hover .overlay{ 
    display: block; 
} 

이것은 jsFiddle입니다 : 내가 .append() 원래 객체를 반환 확신 jsFiddle

Answer 1

, 안 하나에 당신에게 그것에 추가하십시오. 어쩌면 generated.find('#'+newItemId).css(/*css stuff*/);과 같은 것일 수 있습니다. 여기서 newItemId는 방금 삽입 한 item의 id 속성입니다.