jQuery load more & BlocksIt Plugin

[creativeheadz]

Hallo Zusammen,
ich verzweifel heute den halben Tag an folgendem Problem:

Ich nutze das BlocksIt Plugin (gefunden auf : BlocksIt). Das Plugin style Div Container ala pinterest.com . Das Plugin habe ich nun in meine Seite eingebunden. Dazu lese ich Datensätze aus der Datenbank aus, und gebe Sie mit der Formatierung dieses Plugins aus.

Bis hierhin funktioniert alles einwandfrei.

Nun wollte ich aber nicht alle Einträge aufeinmal laden, sondern immer nur ein paar. Deswegen habe ich mich dazu entschlossen, per Klick immer ein paa weitere EInträge dazu zu laden. (mittels jQuery)

Es werden zwar die angeforderten Einträge geladen, jedoch leider nicht in der Formatierung , des o.g. Plugins.
Auf dem angehängten Bild kann man mein Problem evtl. besser verstehen.



Linke Seite: Erster Seitenaufruf mit den ersten 10 Einträgen.
Rechte Seite: Klick auf "more"

Sobald man auf "more" klickt, werden die nächsten Einträge geladen. Aber die nächsten Einträge werden irgendwie nicht an den zuletzt geladenen Eintrag des ersten Seitenaufrufes angefügt, sondern in einem Layer dahinter angezeigt (Bsp. Grüner Kreis im Bild). Desweiteren, werden die Einträge irgendwie nicht in diese versetzte Position (pinterest Style) gebracht, wie die ersten Einträge beim ersten Seitenaufruf. Sie werden einfach wie normale DIV Container behandelt undauf einer Höhe nebeneinander gesetzt (s. Bsp. grüne Linie)

So und nun zu meinem Code

home.php

<script>
$(document).ready(function() {
	
	//blocksit define
	$(window).load( function() {
		$('#container').BlocksIt({
			numOfCol: 5,
			offsetX: 8,
			offsetY: 8
		});
	});
	
	//window resize
	var currentWidth = 1100;
	$(window).resize(function() {
		var winWidth = $(window).width();
		var conWidth;
		if(winWidth < 660) {
			conWidth = 440;
			col = 2
		} else if(winWidth < 880) {
			conWidth = 660;
			col = 3
		} else if(winWidth < 1100) {
			conWidth = 880;
			col = 4;
		} else {
			conWidth = 1100;
			col = 5;
		}
		
		if(conWidth != currentWidth) {
			currentWidth = conWidth;
			$('#container').width(conWidth);
			$('#container').BlocksIt({
				numOfCol: col,
				offsetX: 8,
				offsetY: 8
			});
		}
	});
	
});


//plugin
jQuery.fn.topLink = function(settings) {
  settings = jQuery.extend({
    min: 1,
    fadeSpeed: 200
  }, settings);
  return this.each(function() {
    //listen for scroll
    var el = $(this);
    el.hide(); //in case the user forgot
    $(window).scroll(function() {
      if($(window).scrollTop() >= settings.min)
      {
        el.fadeIn(settings.fadeSpeed);
      }
      else
      {
        el.fadeOut(settings.fadeSpeed);
      }
    });
  });
};

//usage w/ smoothscroll
$(document).ready(function() {
  //set the link
  $('#top-link').topLink({
    min: 400,
    fadeSpeed: 500
  });
  //smoothscroll
  $('#top-link').click(function(e) {
    e.preventDefault();
    $.scrollTo(0,300);
  });
});

jQuery.fn.topLink = function(settings) {
    settings = jQuery.extend({
      min: 1,
      fadeSpeed: 200,
      ieOffset: 50
    }, settings);
    return this.each(function() {
      //listen for scroll
      var el = $(this);
      el.css('display','none'); //in case the user forgot
      $(window).scroll(function() {
        //stupid IE hack
        if(!jQuery.support.hrefNormalized) {
          el.css({
            'position': 'absolute',
            'top': $(window).scrollTop() + $(window).height() - settings.ieOffset
          });
        }
        if($(window).scrollTop() >= settings.min)
        {
          el.fadeIn(settings.fadeSpeed);
        }
        else
        {
          el.fadeOut(settings.fadeSpeed);
        }
      });
    });
  };

$(function()
{
$('.more').live("click",function()
{
var ID = $(this).attr("id");
if(ID)
{
$("#more"+ID).html('<img src="<?php echo $http.$server_path; ?>pub/img/loading.gif">');

$.ajax({
type: "POST",
url: "app/jquery/load_next.php",
data: "lastmsg="+ ID,
cache: false,
success: function(html){
$("div#container").append(html);
$("#more"+ID).remove(); // removing old more button

}
});
}
else
{
$(".morebox").html('The End');// no results
}

return false;
});
});
</script>
<div id="container">
<?php

$query = mysql_query("SELECT * FROM daten ORDER BY PID DESC LIMIT 10");

while($p = mysql_fetch_object($query)){
	
   echo '<div class="grid"">
		<div class="imgholder">
			<img src="'.$http.$server_path.'/files/images/thumbs/'.$p->IMG.'" />
		</div>
		<strong>'.$p->TITLE.'</strong>
		<p>A peaceful sunset view...</p>
		<div class="meta">by j osborn</div>
	</div>';
	
	$pid = $p->PID;

}
?>
<div id="more<?php echo $pid; ?>" class="morebox">
<a href="#" class="more" id="<?php echo $pid; ?>">more</a>
</div>
</div>

load_next.php

<?php
session_start();
include('../settings.php');
include('../connect.php');
include('../functions.php');
if(isset($_POST['lastmsg']))
{
$lastmsg=$_POST['lastmsg'];
$sql=mysql_query("SELECT * FROM daten WHERE PID < '$lastmsg' ORDER BY PID DESC LIMIT 10");

while($p=mysql_fetch_object($sql))
{

   echo '<div class="grid" id="'.$p->PID.'">
		<div class="imgholder">
			<img src="'.$http.$server_path.'/files/images/thumbs/'.$p->IMG.'" />
		</div>
		<strong>'.$p->TITLE.'</strong>
		<p>A peaceful sunset view...</p>
		<div class="meta">by j osborn</div>
	</div>';
	
	$pid = $p->PID;
	
} 
?>
<div id="more<?php echo $pid; ?>" class="morebox">
<a href="#" id="<?php echo $pid; ?>" class="more">more</a>
</div>

<?php
}
?>

Ich hoffe ich konnte mein Problem verdeutlichen und es kann mir jemand helfen.

Gruß

c