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

Question

我正在尝试通过 click 方法动态添加 packery 项目。除了单击 packery 添加 three 新项目外，一切都运行良好。我的问题是如何单击添加一个项目？

Method

Demo

谢谢。

编辑

页面加载后网格项目是五个。见下图。

当click 追加物品 button 包装厂将添加更多三个物品。见下图。

片段

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.

上动态添加 one 项而不是 three 项

注：

Don't submit the down vote if you failed to submit solution for it.

Answer 1

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

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

如果你改成这样：

var $items = getItemElement();

只会添加一个元素。

Demo

Answer 2

奇怪的问题。只需从代码中删除两个元素。

var $items = getItemElement();

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

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

Packery appended methods add three items. How to add one item?

javascript

jquery

packery