網(wǎng)頁瀑布流代碼分享前端開發(fā)
導(dǎo)讀:前端開發(fā)前端開發(fā) 國內(nèi)的，蘑菇街、點點網(wǎng)、以及淘寶的‘哇哦’ 等都出現(xiàn)了這種參差不齊的多欄布局，倒是挺新穎的~ 在小站上線的Sherf頁面，你會看到這種形式的布局。這種布局適合網(wǎng)站seo優(yōu)化課程網(wǎng)站建設(shè)制作。
國內(nèi)的，蘑菇街、點點網(wǎng)、以及淘寶的‘哇哦’ 等都出現(xiàn)了這種參差不齊的多欄布局，倒是挺新穎的~ 在小站上線的Sherf頁面，你會看到這種形式的布局。
這種布局適合于小數(shù)據(jù)塊，每個數(shù)據(jù)塊內(nèi)容相近且沒有側(cè)重。通常，隨著頁面滾動條向下滾動，這種布局還會不斷加載數(shù)據(jù)塊并附加至當前尾部。所以，我們給這樣的布局起了一個形象的名字 —- 瀑布流式布局。
下面是淘寶哇哦的樣式
下面看看我在網(wǎng)路上收集的，兩種實現(xiàn)瀑流布局的代碼吧！
兩種方法調(diào)用的圖片必須設(shè)定高度，否則有錯位。
第一種方法很簡潔。測試訪問
<style?type="text/css"> .list?{?width:935px;?margin:0?auto;?list-style:none;?} .list?li?{?float:left;?display:inline;?margin:0?10px?20px?0;?padding:6px;?border:1px?#DDD?solid;?} </style> </head> <body> <ul?class="list"> <li><a?href="#"><img?src="images/1.j個業(yè)網(wǎng)站建設(shè)公司pg"?alt=""?/></a建設(shè)網(wǎng)站></li> <li><a?href="#"><img?src="images/2.jpg"?alt=""?/></a></li> </ul> <script?type="text/javascript"?src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script> <script?type="text/javascript"?src="js/jquery.masonry.min.js"></script> <script> $(document).ready(function()?{ $('.list').masonry({ itemSelector:'.list li', columnWidth:230 }); }); </script>
第二種方法加載的kissy.js高達428KB，而且必須要遠程訪問kissyui.com，無法本地調(diào)用，不清楚神馬原因
<script?type="text/javascript"?src="http://docs.kissyui.com/kissy/build/kissy.js"></script> <style> .ks-waterfall{position:?absolute;width:?200px;overflow:?hidden;padding:6px;border:1px?solid?#ddd;margin-bottom:20px;} </style> </head> <body> <div?id="container"?style="position: relative;"> <div?class="ks-waterfall"><img?src="1.jpg"?width="200"?height="300"></div> 網(wǎng)站建設(shè)教程<div?class="ks-waterfall"><img?src="2.jpg"?width="200"?height="475"></div> </div> <script> KISSY.use("waterfall",?function?(S,?Waterfall)?{ new?Waterfall({ container:?"#container",????//節(jié)點容器 minColCount:?2,?????????????//最小列數(shù) colWidth:?240???????????????//每列的寬度 }); }); </script>關(guān)鍵詞標簽: 網(wǎng)頁
聲明: 本文由我的SEOUC技術(shù)文章主頁發(fā)布于:2023-05-28 ，文章網(wǎng)頁瀑布流代碼分享前端開發(fā)主要講述網(wǎng)頁網(wǎng)站建設(shè)源碼以及服務(wù)器配置搭建相關(guān)技術(shù)文章。轉(zhuǎn)載請保留鏈接: http://www.bifwcx.com/article/web_12265.html
