Packery angehängte Methoden fügen drei Elemente hinzu. Wie füge ich einen Artikel hinzu?

Question

Ich versuche, dynamisch packery Artikel von click Methode hinzuzufügen. Alles funktioniert gut, außer auf einen einzigen Klick packery hinzufügen drei neue Artikel. Meine Frage ist, wie man einen Gegenstand mit einem einzigen Klick hinzufügt?

Method

Demo

Dank.

bearbeiten

Nach Seitenelemente Last Raster ist Fünf. Siehe das Bild unten.

Wenn click die Anfügen Artikelbutton Packery mehr drei Elemente hinzuzufügen. Siehe das Bild unten.

Snippet

var $grid = $('.grid').packery({ 
 
    itemSelector: '.grid-item' 
 
}); 
 

 
$('.append-button').on('click', function() { 
 
    // create new item elements 
 
    var $items = getItemElement().add(getItemElement()).add(getItemElement()); 
 
    // append elements to container 
 
    $grid.append($items) 
 
    // add and lay out newly appended elements 
 
    .packery('appended', $items); 
 
}); 
 

 

 
// make <div class="grid-item grid-item--width# grid-item--height#" /> 
 
function getItemElement() { 
 
    var $item = $('<div class="grid-item"></div>'); 
 
    // add width and height class 
 
    var wRand = Math.random(); 
 
    var hRand = Math.random(); 
 
    var widthClass = wRand > 0.85 ? 'grid-item--width3' : wRand > 0.7 ? 'grid-item--width2' : ''; 
 
    var heightClass = hRand > 0.85 ? 'grid-item--height3' : hRand > 0.5 ? 'grid-item--height2' : ''; 
 
    $item.addClass(widthClass).addClass(heightClass); 
 
    return $item; 
 
}

* { box-sizing: border-box; } 
 

 
body { font-family: sans-serif; } 
 

 
/* ---- grid ---- */ 
 

 
.grid { 
 
    background: #DDD; 
 
    max-width: 1200px; 
 
} 
 

 
/* clear fix */ 
 
.grid:after { 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
} 
 

 
/* ---- .grid-item ---- */ 
 

 
.grid-item { 
 
    color: #ffffff; 
 
    text-align: center; 
 
    font-size: 30px; 
 
    line-height: 80px; 
 
    float: left; 
 
    width: 80px; 
 
    height: 80px; 
 
    background: #C09; 
 
    border: 2px solid hsla(0, 0%, 0%, 0.5); 
 
} 
 

 
.grid-item--width2 { width: 160px; } 
 
.grid-item--height2 { height: 160px; line-height: 160px; } 
 

 
.grid-item--width3 { width: 240px; } 
 
.grid-item--height3 { height: 240px; } 
 

 
button { font-size: 20px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="http://mfzy.co/packery.pkgd.js"></script> 
 
<h1>Packery - appended</h1> 
 

 
<div class="grid"> 
 
    <div class="grid-item grid-item--width2">1</div> 
 
    <div class="grid-item grid-item--height2">2</div> 
 
    <div class="grid-item">3</div> 
 
    <div class="grid-item">4</div> 
 
    <div class="grid-item grid-item--height2">5</div> 
 
</div> 
 

 
<p><button class="append-button">Append items</button></p>

Meine Frage:

Wie kann ich Elemente steuern anhängen? Ich möchte dynamisch hinzufügen ein Artikel nicht drei Artikel auf einzelne click.

Hinweis:

Sie die unten Abstimmung nicht vorlegen, wenn Sie Lösung dafür vorgelegt habe.

Answer 1

Ich verstehe nicht, was Sie in dieser Zeile Todo versuchen?

var $items = getItemElement().add(getItemElement()).add(getItemElement());

, wenn Sie es sich dies ändern:

var $items = getItemElement();

nur ein Element hinzugefügt wird.

Demo

Answer 2

merkwürdige Frage. Entfernen Sie einfach zwei Elemente aus dem Code.

var $items = getItemElement(); 

http://codepen.io/anon/pen/egbLxQ