この問題を完全に解決できないようです。このループを実行すると:
for ( var i=0; i < 10; i++ ) {
var $items = $(balls());
console.log($items);
$container.imagesLoaded(function(){
$container.append( $items ).masonry( 'appended', $items, true );
});
}
最初の項目と最後の項目は問題ありません。次のようになります。
<div class="box masonry-brick" id="resultBox" style="top: 0px; position: absolute; left: 0px; "><div><p>NAME</p><img src="pathtoimage.jpg"><boxbottom id="boxBottom">NUM%</boxbottom></div></div>
しかし、他の 8 つは問題ありません。次のようになります。
<div class="box" id="resultBox""><div><p>NAME</p><img src="pathtoimage.jpg"><boxbottom id="boxBottom">NUM%</boxbottom></div></div>
したがって、適用される「石工-レンガ」クラスはありません。つまり、石工によって処理されません。
関連するものは次のとおりです。
function balls(){
var boxes = [];
$iterator -= 1;
var box = document.createElement('div'),
spacerdiv = document.createElement('div'),
para = document.createElement('p'),
img = document.createElement('img'),
boxBottom = document.createElement('boxBottom'),
name = document.createTextNode( $test[$iterator][1][2]['name'] ),
percentage = document.createTextNode(Math.floor($test[$iterator][0]*100)+'%');
box.className = 'box';
box.id = 'resultBox';
img.src= 'scripts/php/timthumb.php?src='+$test[$iterator][2]+'&q=100&w=300';
boxBottom.id='boxBottom';
box.appendChild( spacerdiv );
spacerdiv.appendChild( para);
para.appendChild(name);
spacerdiv.appendChild( img );
spacerdiv.appendChild(boxBottom);
boxBottom.appendChild(percentage);
// add box DOM node to array of new elements
return box;
}
おそらく、要素が動的に作成されているため、DOM モデルで何か奇妙なことが起こっていると思いますか?
私は一日中これにいて、私は燃え尽きています...