jQuery圖片瀑布流的簡單實現(xiàn)代碼
更新時間：2017年03月15日 12:04:22 作者：HugoRun
這篇文章主要為大家詳細介紹了jQuery圖片瀑布流的簡單實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
簡單版的Jquery實現(xiàn)圖片瀑布流思路，供大家參考，具體內容如下
注意:本篇文章基于知道每張圖片的實際尺寸的情況下
特點:列數(shù)自適應,圖片寬度固定
已知BUG:
像本案例中的剛好5張圖片循環(huán)顯示且只有5列的情況下會有問題,解決辦法就是給予樣式的時候不按順序,而是先將圖片放在top值最低的列
1.預備
1.基礎html
<div id="main"> <div class="img-item"><img src="images/img1.png" data-size="398*636" alt=""></div> <div class="img-item"><img src="images/img2.png" data-size="560*381" alt=""></div> <div class="img-item"><img src="images/img3.png" data-size="338*537" alt=""></div> <div class="img-item"><img src="images/img4.png" data-size="599*507" alt=""></div> <div class="img-item"><img src="images/img5.png" data-size="532*535" alt=""></div> </div>
新建html文件,然后將#main下一層的代碼多拷貝幾次,畢竟圖片多才能體現(xiàn)瀑布流的作用
2.基礎css
#main{
width: 90%;
background-color: #dab;
text-align: center;
margin:0 auto;
position: relative;
}
img{
width: 100%;
box-sizing:border-box;
box-shadow: 2px 0 3px #ddd,0 2px 3px #ddd;
}
.img-item{
position: absolute;
padding: 3px;
box-sizing:border-box;
height: auto;
display: inline-block;
}
2.開始
1.聲明
//獲取圖片列表包裹層
var $main = $('#main');
//獲取窗口,用于自適應
var $mainWidth = $(window).width();
//定義圖片寬度
var imgWidth = 150;
//可顯示的列數(shù)
var columnNumber = Math.floor($mainWidth/imgWidth);
//存儲top信息
var data = [];
//初始化,比如當前可以顯示6列,那么這里就初始化6個空間
for (var i = 0; i < columnNumber; i++) {
data[i] = 0;
}
2.主體
//
var wall = function() {
//獲取相冊圖片集合
var $imgs = $('.img-item');
//遍歷圖片集合修改top值
$.each($imgs, function(index, el) {
//計算當前列數(shù)
var currColumn = index % columnNumber;
//獲取需要顯示的高度
var size = $('img', el).data('size');
var height = imgWidth / parseInt(size.split('*')[0]) * parseInt(size.split('*')[1])
$(el).css({
width: imgWidth,
left: currColumn * imgWidth,
top: data[currColumn]
});
//如果需要動畫可以使用$(el).animate
data[currColumn] += height;
//本來這里只需要+=$(el).height()就可以解決,但是初始化時有些問題未解決
});
};
3.窗體大小改變事件
$(window).resize(function(event) {
//重置窗口寬度
$mainWidth = $(window).width();
//重置可顯示的列數(shù)
columnNumber = Math.floor($mainWidth / imgWidth);
//動態(tài)修改#main相冊包裹層的寬度,使整個相冊看起來一直居中
$main.css({
width: imgWidth * columnNumber
});
//重置top信息
for (var i = 0; i < columnNumber; i++) {
data[i] = 0;
}
wall();
});
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
jQuery實現(xiàn)類似淘寶網(wǎng)圖片放大效果的方法
這篇文章主要介紹了jQuery實現(xiàn)類似淘寶網(wǎng)圖片放大效果的方法,實例分析了jquery實現(xiàn)圖片放大效果的方法,涉及jquery操作鼠標事件及頁面元素屬性修改的相關技巧,需要的朋友可以參考下2015-07-07
jQuery循環(huán)遍歷子節(jié)點并獲取值的方法
這篇文章主要介紹了jQuery循環(huán)遍歷子節(jié)點并獲取值的方法,涉及jQuery節(jié)點的遍歷與屬性操作相關技巧,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了小編日常收集整理的關于jQuery中常用動畫效果函數(shù)的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
下拉菜單是網(wǎng)站導航常用的表現(xiàn)形式之一，能夠呈現(xiàn)更多的導航內容。如果網(wǎng)站能夠設計出有吸引力的網(wǎng)站導航，將會吸引更多的用戶去瀏覽網(wǎng)站的內容2012-06-06
這篇文章主要介紹了jQuery簡單判斷值是否存在于數(shù)組中的方法,涉及jQuery數(shù)組遍歷及基于$.inArray的元素判斷相關操作技巧,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了jQuery獲取URL請求參數(shù)的方法,涉及jquery針對URL的獲取與字符串的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
本文主要介紹了jQuery兩種方法寫選項卡的實例，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了jquery實現(xiàn)圖片上傳之前預覽的方法,涉及jquery針對圖片及頁面元素的相關操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
相信大家都知道jquery.cookie.js是一個輕量級的cookie 插件，可以讀取、寫入、刪除 cookie。下面這篇文章就來給大家簡單的介紹下關于jquery.cookie.js的介紹與使用方法，需要的朋友可以參考借鑒，一起來看看吧。2017-02-02
淺談struts1 & jquery form 文件異步上傳
下面小編就為大家?guī)硪黄獪\談struts1 & jquery form 文件異步上傳。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05