jquery는 폭포수 흐름 효과를 구현합니다.

jquery를 사용하여 폭포 흐름 효과를 얻으세요. 실행 후 효과를 확인하려면 코드에 있는 JQ 소개를 직접 교체해야 합니다.

코드 복사 코드는 다음과 같습니다.

#컨테이너 {
너비: 90%;
여백: 80px 자동;
}

.box {
box-shadow: 0 0 4px #999;
margin-top: 40px;
padding: 40px;
글꼴 계열: "Century Gothic", "Microsoft YaHei ", Arial, monospace;
}
.loading {
text-align: center;
}

$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$size = 20;
시도
{
$pdo = new PDO('mysql:host=localhost;dbname=wechatbook', 'root', 'root');
$offset = ($page - 1) * $size;
$sql = "wcb_rss_news 제한 $offset,$size에서 제목 선택";
$stmt = $pdo->query($sql);
$stmt->setFetchMode(PDO::FETCH_ASSOC);
$list = $stmt->fetchAll();
if (!empty($list))
{
foreach ($list as $row)
{
?>

= $row['title'] ?>

}
}
else
{
echo '';
}
}
catch(PDOException $e)
{
}
?>

다음 페이지

<script><BR> $(function() { <BR> var $container = $("#container");<BR> $container.imagesLoaded(function() {<BR> $container.masonry({<BR> itemSelector: '.box',<BR> isAnimated : true ,<BR> columnWidth:200,<BR> gutterWidth:200,<BR> // isFitWidth:true,//적응 너비<BR> isResizingL:true//크기 조정 가능 여부<BR> });<BR> });<BR> $container.infinitescroll({<BR> navSelector: '#next-link',<BR> nextSelector: '#next-link a',<BR> itemSelector: '.box',<BR> animate: true,<BR> loading: {<BR> msgText: "로드 중...",<BR> doneMsg: '새 데이터가 없습니다...',<BR> img: 'http:// www.jb51. ne/img/loading.gif',<BR> 선택기: '.loading'<BR> },<BR> localMode: true<BR> }, function(newElements) {<BR> console.dir( newElements)<BR> var $newEle = $(newElements);<BR> $newEle.imagesLoaded(function() {<BR> $container.masonry('appended', $newEle, true);<BR> }); );<BR> });<BR></script>