網頁瀑布流代碼分享前端開發
導讀:前端開發前端開發 國內的，蘑菇街、點點網、以及淘寶的‘哇哦’ 等都出現了這種參差不齊的多欄布局，倒是挺新穎的~ 在小站上線的Sherf頁面，你會看到這種形式的布局。這種布局適合網站seo優化課程網站建設制作。
國內的，蘑菇街、點點網、以及淘寶的‘哇哦’ 等都出現了這種參差不齊的多欄布局，倒是挺新穎的~ 在小站上線的Sherf頁面，你會看到這種形式的布局。
這種布局適合于小數據塊，每個數據塊內容相近且沒有側重。通常，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊并附加至當前尾部。所以，我們給這樣的布局起了一個形象的名字 —- 瀑布流式布局。
下面是淘寶哇哦的樣式
下面看看我在網路上收集的，兩種實現瀑流布局的代碼吧！
兩種方法調用的圖片必須設定高度，否則有錯位。
第一種方法很簡潔。測試訪問
<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個業網站建設公司pg"?alt=""?/></a建設網站></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，無法本地調用，不清楚神馬原因
<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> 網站建設教程<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",????//節點容器 minColCount:?2,?????????????//最小列數 colWidth:?240???????????????//每列的寬度 }); }); </script>關鍵詞標簽: 網頁
聲明: 本文由我的SEOUC技術文章主頁發布于:2023-05-28 ，文章網頁瀑布流代碼分享前端開發主要講述網頁網站建設源碼以及服務器配置搭建相關技術文章。轉載請保留鏈接: http://www.bifwcx.com/article/web_12265.html
