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;
}


< body>

$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)
{
?>

}
}
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>