Packery附加方法添加三个项目.如何添加一个项目？

Question

我试图通过方法添加动态包装项目click.所有的一切都工作正常,除了单击包装添加三个新项目.我的问题是如何在单击时添加一个项目？

方法

演示

谢谢.

编辑

页面加载后网格项为五.见下图.

当click该追加项目 button packery将增加更多的3项.见下图.

片段

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>

我的问题:

如何控制追加物品？我想在单个上动态添加一个项目而不是三个项目click.

注意:

如果您未能提交解决方案,请不要提交向下投票.

Answer 1

我不明白你想在这一行做什么？

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

如果你把它改成这样：

var $items = getItemElement();

仅添加一个元素。

演示