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

Question

我尝试按click方法添加动态 packery 项目。除了单击打包添加 三个 新项目外，所有事情都能正常运行。我的问题是如何在单击时添加一个项目？

Method

Demo

感谢。

修改

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

当click 追加项 button包时，会添加更多三个项。见下图。

段

＆＃13;

＆＃13;

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;
}

＆＃13;

* { 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; }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我的问题：

如何控制追加物品？我想在单click上动态添加一个项而非三个项。

注意：

  

如果您未能提交解决方案，请不要提交投票。

Answer 1

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

var $items = getItemElement();

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

Answer 2

我不明白你在这条线上想要做什么？

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

如果您将其更改为：

var $items = getItemElement();

只会添加一个元素。

Demo