新手指南waterfall瀑布流網頁實現的兩種設計方案Masonry與KISSY-js教程-網頁制作

香港交友討論區HkEasyChat

 找回密碼
 新會員註冊
..
喜歡本頁?立即SHARE


香港交友討論區HkEasyChat»論壇forum Hkeasychat電腦網絡 Blog/網頁設計程式區 waterfall瀑布流網頁實現的兩種設計方案Masonry與KISSY- ...
您正在討論區的: waterfall瀑布流網頁實現的兩種設計方案Masonry與KISSY- ...
查看: 70|回復: 0
收起左側

[JavaScript語法] waterfall瀑布流網頁實現的兩種設計方案Masonry與KISSY-js教程-網頁制作

[複製鏈接]

簽到天數: 2 天

連續簽到: 1 天

[LV.1]初來乍到

評論頭像

waterfall瀑布流網頁實現方法我整理了兩種常用的Masonry與KISSY方法,下面我來給大家介紹這兩種瀑布流實現方法。

waterfall瀑布流網頁實現的設計方案一︰Masonry

waterfall 瀑布流網頁實現的設計方案一︰Masonry(含loading幾次後出現分頁)
瀑布流設計早就不是什麼新鮮的東西了,現在網上基于瀑布流的網頁非常常見,這種設計能給瀏覽器者更直接更有效率的瀏覽體驗。
那麼我們可以如何從前端、後端配合去實現這種效果呢?
其實目前已有很多基于jquery或原生態javascript的waterfall插件,我們只需要根據api進行運用,既可做到不錯的瀑布流網頁。
但是在這些插件中,做得兼容性好並且弁鉡暀ˋ貜滿A首推下面兩種︰
1.Masonry
2.KISSY
下面一一解說下這兩種瀑布流方式的實現方式。本文只說Masonry,KISSY將會在下一篇文章更新。
需求︰瀑布流輸出,loading 5 次後出現分頁,每次loading 12個內容。
jquery雖然不是必須的,但是為了方便,我們還是用上jquery吧。
下面的例子基于phpcms
jquery.min.js 及 masonry.pkgd.min.js請自行下載。
一、html代碼︰
[table=560,#FB7] [tr]        [td=1,1,464] 代碼如下[/td]        [td=1,1,109]復制代碼[/td] [/tr] [tr]        [td=2,1]





<div id="content">

<div id="thumbs">

{loop $datas $r}
<div class="imgbox" itemscope itemtype="http:///ImageObject">

waterfall瀑布流網頁實現的兩種設計方案Masonry與KISSY-js教程-網頁制作,香港交友討論區

{$r['desc']}
<span class="img_time" itemprop="datePublished">@





系統自動相關推薦tag:forum,交友,alexa



上一篇︰ajax 跨域提交數據實例詳解-js教程-網頁制作
下一篇︰JSONP的數據格式優化-js教程-網頁制作
+10
如您覺得" waterfall瀑布流網頁實現的兩種設計方案Masonry與KISSY-js教程-網頁制作 "很膠,請share出去
您正在回覆: waterfall瀑布流網頁實現的兩種設計方案Masonry與KISSY-js教程-網頁制作
您需要登錄後才可以回帖 登錄 | 新會員註冊

本版積分規則

回post預設係匿名,如唔想匿名回post請會員自己勾走

閱讀版|閱讀版大量|純文字網頁|香港交友討論區

Copyright © 香港交友討論區HKEASYCHAT Co. All Rights Reserved
香港廣告銷售No.1

手機版|論壇聯絡
HK ADVERTISEMENT 2015 GOLDEN REWARDS

GMT+8, 27-5-2018 03:33 AM

快速回復 返回頂部 返回列表
保持討論區活躍高登錄一齊討論啦~ hkeasychat