我已从此链接中获取脚本：http://mode87.com/untame/demo/filteredgallery/
现在我想要的是我想让它变得动态。在我的网站中，当页面加载时，它显示一些项目，下面有一个按钮通过ajax加载更多项目，当加载更多项目时，过滤不能正常工作。
例如，页面加载了4个项目，现在我点击加载更多，然后当我再次点击“所有＆＃39;它只显示了4个项目，但我希望显示所有已通过ajax加载的项目。
等待你的答案
我的代码
的index.php
<ul class="filter nav nav-pills">
<li data-value="all">All</li>
<li data-value="1">OPENING CEREMONIES</li>
<li data-value="2">PRODUCT LAUNCHES</li>
<li data-value="3"> MALL SHOWS </li>
<li data-value="4">FAMILY FESTIVALS</li>
<li data-value="5">CULTURAL FESTIVALS</li>
<li data-value="6">WORLD CLASS SHOWS</li>
<li data-value="7">SPORTS EVENTS</li>
<li data-value="8">GALA DINNERS</li>
</ul>
<ul class="thumbnails" id="loading_more">
<?php
$_SESSION["page_load"] = 1;
portfolioItems($_SESSION["page_load"]);
?>
</ul>
<div class="row-fluid">
<div class="span12 portfolio-load-more-wrapper">
<h1><span class="caption_heading">WANT TO</span> SEE MORE?</h1>
<h2><span class="icon-down-open-2 gray" onClick="javascript:showMore();"></span></h2>
</div>
</div>
点击后，showMore（）函数：
function showMore()
{
var data = 'load_more='+'load_more';
$.ajax({
url:'process.php',
type:'post',
data:data,
success:function(html)
{
$('.thumbnails').html(html);
}
});
}
process.php
function portfolioItems($page_load)
{
if( $page_load == 1 )
{
global $con;
$item_list = "";
//Query to get the items
$sql_item_details = mysqli_query($con , "SELECT * FROM portfolio_items LIMIT 4");
$count = mysqli_num_rows($sql_item_details);
//If records found
if( $count > 0 )
{
while($row = mysqli_fetch_array($sql_item_details))
{
$id = $row["id"];
$title = $row["title"];
$category = $row["category_id"];
$date = $row["date"];
$detail = $row["detail"];
$thumbnail = $row["thumbnail"];
$item_list .= '<li data-type="'.$category.'" data-id="id-1" class="span3 fancybox fancybox.iframe portfolio-iframe"
onClick="javascript:showPortfolioDetail('.$id.');">
<img src="images/portfolios/portfolio_thumbs/'.$thumbnail.'" width="295" height="295" border="0">
<div class="img_hover_box">
<div class="portfolio_title">
<div class="portfolio-cpation">
<h2>
<div class="arrow_icon">
<i class="icon-right-circled-1"></i>
</div>
<span>'.$title.'</span>
</h2>
</div>
</div>
</div>
<div class="clock_year">
<span class="icon-clock-alt"></span><span class="year">'.$date.'</span>
</div>
</li>';
}
echo $item_list;
}
}
else
{
//Get the pagination value.
$page_no = $page_load;
$one_page = $page_no * 4;
$start_from = $one_page - 4;
$limit = 4;
global $con;
$item_list = "";
//Query to get the items
$sql_item_details = mysqli_query($con , "SELECT * FROM portfolio_items LIMIT 0,".$one_page);
$count = mysqli_num_rows($sql_item_details);
//If records found
if( $count > 0 )
{
while($row = mysqli_fetch_array($sql_item_details))
{
$id = $row["id"];
$title = $row["title"];
$category = $row["category_id"];
$date = $row["date"];
$detail = $row["detail"];
$thumbnail = $row["thumbnail"];
$item_list .= '<li data-type="'.$category.'" data-id="id-1" class="span3 fancybox fancybox.iframe portfolio-iframe"
onClick="javascript:showPortfolioDetail('.$id.');">
<img src="images/portfolios/portfolio_thumbs/'.$thumbnail.'" width="295" height="295" border="0">
<div class="img_hover_box">
<div class="portfolio_title">
<div class="portfolio-cpation">
<h2>
<div class="arrow_icon">
<i class="icon-right-circled-1"></i>
</div>
<span>'.$title.'</span>
</h2>
</div>
</div>
</div>
<div class="clock_year">
<span class="icon-clock-alt"></span><span class="year">'.$date.'</span>
</div>
</li>';
}
echo $item_list;
}
}
}
答案 0 :(得分：0)
好吧，我想我明白了。如果你查看js代码，在function gallery(){}之后你会看到这样的过滤操作代码：
var $itemsHolder = $('ul.thumbnails');
var $itemsClone = $itemsHolder.clone();
var $filterClass = "";
$('ul.filter li').click(function(e) {
e.preventDefault();
$filterClass = $(this).attr('data-value');
if($filterClass == 'all'){ var $filters = $itemsClone.find('li'); }
else { var $filters = $itemsClone.find('li[data-type='+ $filterClass +']'); }
$itemsHolder.quicksand(
$filters,
{ duration: 1000 },
gallery
);
});
现在这是在首次加载页面时设置过滤器，因为新添加的项目不在$itemsHolder列表中，进一步过滤不会涉及新添加的项目。您需要做的是将此代码包装在如下函数中：
function gallery_filter() {
var $itemsHolder = $('ul.thumbnails');
.....
}
然后在ajax成功之后调用此函数：
success:function(html)
{
$('.thumbnails').html(html);
gallery_filter(); // here
}