基于随机数传播图像

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：jsFiddle

Answer 1

我很确定 .append() 返回原始对象，而不是您附加到它的那个。所以可能类似于generated.find('#'+newItemId).css(/*css stuff*/);，其中newItemId 是您刚刚插入的item 的id 属性。