Các phương thức đóng gói theo gói thêm ba mục. Cách thêm một mục?

Question

Tôi đang cố gắng thêm động packery mục theo phương pháp click. Tất cả mọi thứ đều hoạt động tốt ngoại trừ một nhấp chuột duy nhất packery thêm ba mục mới. Câu hỏi của tôi là làm thế nào để thêm một mục vào một cú nhấp chuột?

Method

Demo

Cảm ơn.

Sửa

Sau mặt hàng lưới tải trang là Năm. Xem hình bên dưới.

Khi click các Nối mụcbutton packery sẽ thêm ba mục. Xem hình bên dưới.

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>

Câu hỏi của tôi:

Làm thế nào tôi có thể kiểm soát thêm các mặt hàng? Tôi muốn thêm động một mục không ba các mục trên một đơn click.

Lưu ý:

Đừng nộp phiếu xuống nếu bạn thất bại trong việc nộp giải pháp cho nó.

Answer 1

Tôi không hiểu bạn đang cố gắng làm gì trong dòng này?

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

nếu bạn thay đổi nó như thế này:

var $items = getItemElement();

chỉ có một phần tử sẽ được thêm vào.

Demo

Answer 2

Câu hỏi lạ. Chỉ cần xóa hai phần tử ra khỏi mã.

var $items = getItemElement(); 

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