我的 PHP 从 MySQL 抓取数据并将其显示在我的 index.php 的容器 div 中，没有问题。但是，数据会一个接一个地显示（不同的行），而不是使用同一行中的可用空间。
这是在 body 标记中用作整体容器的 div 的 index.php 片段。第二个 div 用于无限滚动功能，当用户到达屏幕末尾时加载更多数据。
<div id="postedComments">
<?php require_once 'jquery-masterLoader.php' ; ?>
</div>
<div id="loadMoreComments" style="display:none;" > <center>test for hidden field </center>
</div>
这是 PHP jquery-masterLoader.php，它是控制加载脚本的两个 PHP 文件之一。另一个对于 show 和 tell 来说不是必需的，因为它仅在用户到达屏幕末尾时才被调用。
<?php
if ( strpos(strtolower($_SERVER['SCRIPT_NAME']),strtolower(basename(__FILE__))) ) {
header("Location: index.php");
die("Denny access");
}
error_reporting(0) ;
set_exception_handler('exception_handler') ;
$config = parse_ini_file("core/config/my.ini") ;
$db=new mysqli($config['dbLocation'] , $config['dbUser'] , $config['dbPassword'] ,
$config['dbName']);
if(mysqli_connect_error()) {
throw new Exception("<b>Could not connect to database</b>") ;
}
if (!$result = $db->query("SELECT * FROM world_country ORDER BY id ASC LIMIT
0,30")) {
throw new Exception("<b>Could not read data from the table </b>") ;
}
while ($data = $result->fetch_object()) {
$id = $data->id;
$name = $data->Name ;
$continent = $data->Continent;
$population = $data->Population ;
echo "
<div class='postedComment' style=\"width: 33%; \ list-style: ; \ float: left;\" id=\"$data-
>id \">
<b>Country : </b>$name <br />
<b>Continent : </b>$continent<br/>
<b>Population : </b>$population
<i style=\"font-size:small;color:blue\">Index : $id</i>
<hr />
</div>
" ;
}
/* close connection */
$db->close();
function exception_handler($exception) {
echo "Exception cached : " , $exception->getMessage(), "";
}
很抱歉将样式与 PHP 混合在一起，这是一项正在进行的工作。
Here's the CSS rules
#postedComments {
width: 100%;
display: ;
}
html, body {
height: ;
width: 100%;
margin: 0;
padding: 0;
}
#body {
width: 60%;
margin: 1% auto;
}
/* Resets */
ul {
padding:0;
margin:0 0 20px 0;
list-style:none;
}
h1, h2 {
padding:0;
margin:0 0 20px 0;
font-weight:normal;
}
p {
padding:0;
margin:0 0 20px 0;
}
a:link, a:visited {
text-decoration:underline;
color:#000;
}
a:hover {
text-decoration:none;
}
ul li {
padding:5px 0;
}
ul li input[type="text"], ul li input[type="password"] {
width:200px;
}
Also here's the JavaScript calling upon the scripts.
(custom_jquery-debug.js)
$(document).ready(function() {
$("#postedComments").append( "<p id='last'></p>" );
//$("#postedComments").append( "<div id='last'></div>" );
console.log("Document Ready ------------------------");
if ($("#last").length){
position = $("#last").offset() ;
console.log("Initialization of last_DIV succeeded and it's values are ....Top-value
is :"+Math.floor(position.top) + " ---- Left-value is : "+ Math.floor(position.left ))
;
}
doMouseWheel = 1 ;
$(window).scroll(function() {
if (!doMouseWheel) {
return ;
} ;
var distanceTop = $('#last').offset().top - $(window).height();
console.log("Mouse scroll , and The DIV last has an offset-top value of :"+
Math.floor($("#last").offset().top)+"----Window height is
:"+Math.floor($(window).height())+"---- Last's offset minus window height is :
"+Math.floor(distanceTop)) ;
if ($(window).scrollTop() > distanceTop){
console.log("End of Window Reached >>>>>>>>>>>>>>>>>>>>>>>>>>") ;
console.log("Show Div loadMoreComments and Class .postedComments.last has the id of :
"+$(".postedComment:last").attr('id'));
doMouseWheel = 0 ;
$('div#loadMoreComments').show();
$.ajax({
dataType : "html" ,
url: "jquery-loadMoreComments.php?lastComment="+
$(".postedComment:last").attr('id') ,
success: function(html) {
doMouseWheel = 1 ;
if(html){
$("#postedComments").append(html);
console.log("Append html , sumarize .... first id has nr : "
+$(".postedComment:first").attr('id')+ " --- last id has nr :"
+$(".postedComment:last").attr('id'));
position = $("#last").offset() ;
console.log("New values of last_DIV from IF_html are , Top
:"+Math.floor(position.top )+" --- left :"+Math.floor(position.left)) ;
$("#last").remove();
if ($("#last").length == 0 ){ console.log(">>>>>>>>>>>>>>>The last_DIV is removed
from stage>>>>>>>>>>") ; }
$("#postedComments").append( "<p id='last'></p>" );
if ($("#last").length ){
position = $("#last").offset() ;
console.log(">>>>>>>>>>>>>>>A new last_DIV is appended and it's values are , Top :"
+ Math.floor(position.top) +" ---- Left :" + Math.floor(position.left )) ;
}
$('div#loadMoreComments').hide();
}else{
console.log("LoadMoreComments is replaced with a custom message") ;
$('div#loadMoreComments').replaceWith("<center><h1 style='color:red'>End of
countries !!!!!!!</h1></center>");
}
}
});
}
});
});
Second JS script (custom_jquery.js)
$(document).ready(function() {
$("#postedComments").append( "<p id='last'></p>" );
//console.log("Document Ready");
doMouseWheel = 1 ;
$(window).scroll(function() {
//console.log("Window Scroll ----");
if (!doMouseWheel) {
return ;
} ;
var distanceTop = $('#last').offset().top - $(window).height();
if ($(window).scrollTop() > distanceTop){
//console.log("Window distanceTop to scrollTop Start");
doMouseWheel = 0 ;
$('div#loadMoreComments').show();
//console.log("Another window to the end !!!!
"+$(".postedComment:last").attr('id'));
$.ajax({
dataType : "html" ,
url: "jquery-loadMoreComments.php?lastComment="+
$(".postedComment:last").attr('id') ,
success: function(html) {
doMouseWheel = 1 ;
if(html){
$("#postedComments").append(html);
//console.log("Append html--------- " +$(".postedComment:first").attr('id'));
//console.log("Append html--------- " +$(".postedComment:last").attr('id'));
$("#last").remove();
$("#postedComments").append( "<p id='last'></p>" );
$('div#loadMoreComments').hide();
}else{
$('div#loadMoreComments').replaceWith("<center><h1 style='color:red'>End of
countries !!!!!!!</h1></center>");
// Added on Ver.0.4
//Disable Ajax when result from PHP-script is empty (no more DB-results )
doMouseWheel = 0 ;
}
}
});
}
});
});