Problemschilderung:
Ich benutze die Grid Library von masonry und die library imageLoaded.
& Dazu lade ich beim scrollen mehr Elemente.
Anfang = 9 Elemte = scrollen -> neue 9 Elemente = scrollen -> neue 9 Elemente = ∞
Das Problem ist, ich lade die Elemente in <div class="results"><div class="grid"> </div</div>
Wenn man jetzt scrollt passiert folgendes:
<div id="results"> (In Results werden die elemente geladen)
<div class="grid">9 Elemente</div> (Grid)
<div class="grid">9 Elemente</div> (Grid)
</div>
So möchte ich es haben:
<div id="results">
<div class="grid">
... 9 Elemente
... 9 Elemente
</div>
</div>
Visuelles Beispiel:
Oben enden die 9 Elemente und unten beginnen die 9 Elemente.. aber das passt sich dann nicht dem Grid system an und sieht halt wirklich ugly aus.
Meine index.php
<?php
require_once("configtest.php");
$results = $mysqli->query("SELECT COUNT(*) as t_records FROM galerie");
$total_records = $results->fetch_object();
$total_groups = ceil($total_records->t_records/$items_per_group);
$results->close();
?>
<script type="text/javascript">
$(document).ready(function() {
var track_load = 0;
var loading = false;
var total_groups = <?php echo $total_groups; ?>;
$('#results').load("auto-load-more-data/autoload_process.php", {'group_no':track_load}, function() {track_load++;});
$(window).scroll(function() { //detect page scroll
if($(window).scrollTop() + $(window).height() == $(document).height()) //zum ende der seite gescrollt?
{
if(track_load <= total_groups && loading==false)
{
loading = true;
$('.animation_image').show(); // ladeanimation
//Mehr daten laden
$.post('auto-load-more-data/autoload_process.php',{'group_no': track_load}, function(data){
$("#results").append(data); // in results
//hide loading image
$('.animation_image').hide(); // ladeanimation entfernen
track_load++;
loading = false;
}).fail(function(xhr, ajaxOptions, thrownError) {
alert(thrownError);
$('.animation_image').hide();
loading = false;
});
}
}
});
});
</script>
<style>
.animation_image {background: #F9FFFF;border: 1px solid #E1FFFF;padding: 10px;width: 500px;margin-right: auto;margin-left: auto;}
</style>
<div id="results"></div>
<div class="animation_image" style="display:none" align="center"><img src="https://yume.lu/auto-load-more-data/ajax-loader.gif"></div>
autoload.php
<script>
$(document).ready(function() {
var $container = $('.grid');
$container.imagesLoaded( function() {
$('.grid').masonry({
itemSelector: '#grid-item',
percentPosition: true,
columnWidth: '.grid-sizer'
});
});
});
</script>
<div class="grid">
<?php
require("configtest.php");
if($_POST)
{
$group_number = filter_var($_POST["group_no"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
if(!is_numeric($group_number)){
header('HTTP/1.1 500 Invalid number!');
exit();
}
$position = ($group_number * $items_per_group);
$results = $mysqli->query("SELECT * FROM galerie WHERE hot = '1' ORDER BY id DESC LIMIT $position, $items_per_group");
if ($results) {
... hier der rest
pls halp i suck, me is very bad 
edit: mir reichen nur anhaltspunkte wie ich vorgehen kann, bin schon die ganze zeit am rumprobieren und bekomme es nicht.
möchte keine arbeit abgenommen bekommen, wäre auch gerne ohne hilfe drauf gekommen but i suck.