Я использую мозаичный поток для перечисления своих элементов, но их много, поэтому я хочу отобразить только первые 20 элементов, а после нажатия кнопки показать следующие 20 ниже первых 20 и так далее.
Для этого я использую вызов ajax, он работает отлично, поэтому он показывает следующие 20 элементов, но затем разбивается макет мозаичного потока …
Кто-нибудь знает, как я могу решить эту проблему?
Я попытался использовать событие add мозаичного потока, но затем он добавляет следующие 20 элементов в самый маленький столбец …
Я также пытался добавить данные в контейнер мозаичного потока, но это тоже не очень хорошо …
HTML выглядит так (2 столбца):
<div class="mosaicflow">
<div class="mosaicflow__column">
<div class="mosaicflow__item">
// item details
</div>
<div class="mosaicflow__item">
// item details
</div>
// more mosaicflow__item divs
</div>
<div class="mosaicflow__column">
<div class="mosaicflow__item">
// item details
</div>
<div class="mosaicflow__item">
// item details
</div>
// more mosaicflow__item divs
</div>
</div>
В успехе AJAX я добавляю данные, которые получаю из скрипта:
$(document).on('click', '#btn', function(){
//...
success:function(data) {
$('.mosaicflow').append(data);
}
});
Я получаю данные через ajax из сценария php в следующем формате:
<div class="mosaicflow__item">
// item details
</div>
Обновление, вот полный код HTML и AJAX:
<?php
include_once('connection.php');
$categoryName = 'Category';
$query = $pdo->prepare("SELECT * FROM items WHERE cat_name = '$categoryName' ORDER BY id DESC LIMIT 20");
$query->execute();
$items = $query->fetchAll();
$item_id = '';
if($query->rowCount() > 0) {; ?>
<div class="mosaicflow myContainer">
<?php
foreach($items as $item) { ?>
<div class="mosaicflow__item">
<h3><?php echo $item['name'] ?></h3>
<p><?php echo summary($item['text']); ?></p>
<div class="ButtonHolder">
<a href="link.html" class="button" style="vertical-align:middle;"><span>Link </span></a>
</div>
</div>
<?php
$item_id = $item['id'];
} ?>
<button name="btn_more" id="btn_more" data-item="<?php echo $item_id; ?>" class="btn btn-success form-control" >more</button>
<?php
}
else {
echo "<p>There are no items!</p>";
}
?>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/jquery.mosaicflow.js"></script>
<script>
$(document).ready(function(){
$(document).on('click', '#btn_more', function(){
var last_item_id = $(this).data("item");
$('#btn-more').html("loading...");
$.ajax({
url: "load_items.php",
type: "POST",
data: {last_item_id:last_item_id,categoryname:"<?php echo $categoryName; ?>"},
dataType: "text",
success:function(data)
{
if (data != '') {
$('#btn_more').remove();
// Init mosaicflow
var container = $('.myContainer').mosaicflow();
// Create new html node and append to smallest column
var elm = $(data);
container.mosaicflow('add', elm);
//$('.mosaicflow').append(data);
}
else {
$('#btn_more').html("No Data");
}
}
});
});
});
</script>
Ajax (load_items.php):
<?php
include_once('connection.php');
$output = '';
$item_id = '';
$lastItemId = $_POST['last_item_id'];
$categoryName = $_POST['categoryname'];
$query = $pdo->prepare("SELECT * FROM items WHERE cat_name = '$categoryName' AND id < $lastItemId ORDER BY id DESC LIMIT 20");
$query->execute();
$items = $query->fetchAll();
$items_num = $query->rowCount();
if($items_num > 0) {
foreach ($items as $item) {
$item_id = $item['id'];
$output .= '<div class="mosaicflow__item">';
$output .= '<h3>' . $item['name'] . '</h3>';
$output .= '<p>' . $item['text'] . '</p>';
$output .= '<div class="ButtonHolder">';
$output .= '<a href="link.html" class="button" style="vertical-align:middle;"><span>Link </span></a>';
$output .= '</div>';
$output .= '</div>';
}
$output .= '<button name="btn_more" id="btn_more" data-item="' . $item_id . '" class="btn btn-success form-control" >more</button>';
echo $output;
}
?>
Обновлен вызов jQuery ajax
$(document).on('click', '#btn', function(){
//...
success:function(data) {
data = $('<div />').append(data).find('.mosaicflow__item').html();
$('.mosaicflow .mosaicflow__item').append(data);
}
});
Других решений пока нет …