jQuery图片自适应排列显示代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery图片自适应排列显示代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery图片自适应排列显示代码</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { margin: 0; padding: 0; border: 0; min-width: 320px; color: #777; }
html, button, input, select, textarea, .pure-g [class *= "pure-u"] { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.02em; }
p, td { line-height: 1.5; }
ul { padding: 0 0 0 20px; }

th { background: #eee; white-space: nowrap; }
th, td { padding: 10px; text-align: left; vertical-align: top; font-size: .9em; font-weight: normal; border-right: 1px solid #fff; }
td:first-child { white-space: nowrap; color: #008000; width: 1%; font-style: italic; }

h1, h2, h3 { color: #4b4b4b; font-family: "Source Sans Pro", sans-serif; font-weight: 300; margin: 0 0 1.2em; }
h1 { font-size: 4.5em; color: #1f8dd6; margin: 0 0 .4em; }
h2 { font-size: 2em; color: #636363; }
h3 { font-size: 1.8em; color: #4b4b4b; margin: 1.8em 0 .8em }
h4 { font: bold 1em sans-serif; color: #636363; margin: 4em 0 1em; }
a { color: #4e99c7; text-decoration: none; }
a:hover { text-decoration: underline; }
p, pre { margin: 0 0 1.2em; }
::selection { color: #fff; background: #328efd; }
::-moz-selection { color: #fff; background: #328efd; }

@media (max-width:480px) {
	h1 { font-size: 3em; }
	h2 { font-size: 1.8em; }
	h3 { font-size: 1.5em; }
	td:first-child { white-space: normal; }
}

.inline-code { padding: 1px 5px; background: #eee; border-radius: 2px; }
pre { padding: 15px 10px; font-size: .9em; color: #555; background: #edf3f8; }
pre i { color: #aaa; } /* comments */
pre b { font-weight: normal; color: #cf4b25; } /* strings */
pre em { color: #0c59e9; } /* numeric */

/* Pure CSS */
.pure-button { margin: 5px 0; text-decoration: none !important; }
.button-lg { margin: 5px 0; padding: .65em 1.6em; font-size: 105%; }

/* demo4 */
#demo4 .item { margin: 0 1px 10px 1px; border: 0; }
#demo4 .item .img { position: absolute; left: 0; top: 0; right: 2px; bottom: 20px; }
#demo4 .bottom { position: absolute; left: 2px; bottom: 0; right: 2px; font-size: 13px; height: 18px; }

/* demo5 */
#demo5 .over { position: absolute; bottom: 0; left: 0; right: 0; padding: 4px 6px; font-size: 13px; color: #fff; background: #222; background: rgba(0,0,0,.7); }

/* demo6 */
#demo6 a { display: block; position: absolute; top: 0; right: 0; bottom: -12px; left: 0; }
</style>
<link rel="stylesheet" href="jquery.flex-images.css">
</head>
<body>
<div style="max-width:900px;margin:auto;padding:0 10px">
	<h3>演示样式一</h3>
</div>

<div style="max-width:908px;margin:auto;padding:0 10px 10px">
	<div id="demo1" class="flex-images">
		<div class="item" data-w="219" data-h="180"><img src="images/1.jpg"></div>
		<div class="item" data-w="279" data-h="180"><img src="images/2.jpg"></div>
		<div class="item" data-w="270" data-h="180"><img src="images/3.jpg"></div>
		<div class="item" data-w="270" data-h="180"><img src="images/4.jpg"></div>
		<div class="item" data-w="147" data-h="180"><img src="images/5.jpg"></div>
		<div class="item" data-w="276" data-h="180"><img src="images/6.jpg"></div>
		<div class="item" data-w="319" data-h="180"><img src="images/7.jpg"></div>
		<div class="item" data-w="270" data-h="180"><img src="images/8.jpg"></div>
		<div class="item" data-w="240" data-h="180"><img src="images/9.jpg"></div>
		<div class="item" data-w="270" data-h="180"><img src="images/10.jpg"></div>
		<div class="item" data-w="240" data-h="180"><img src="images/11.jpg"></div>
		<div class="item" data-w="270" data-h="180"><img src="images/12.jpg"></div>
		<div class="item" data-w="283" data-h="180"><img src="images/13.jpg"></div>
		<div class="item" data-w="271" data-h="180"><img src="images/14.jpg"></div>
		<div class="item" data-w="258" data-h="180"><img src="images/15.jpg"></div>
	</div>
</div>

<div style="max-width:900px;margin:auto;padding:0 10px 50px">

	<h3>演示样式二</h3>
	<div id="demo2" class="flex-images">
		<div class="item" data-w="219" data-h="180"><img src="blank.gif" data-src="images/1.jpg"></div>
		<div class="item" data-w="279" data-h="180"><img src="blank.gif" data-src="images/2.jpg"></div>
		<div class="item" data-w="270" data-h="180"><img src="blank.gif" data-src="images/3.jpg"></div>
		<div class="item" data-w="270" data-h="180"><img src="blank.gif" data-src="images/4.jpg"></div>
		<div class="item" data-w="147" data-h="180"><img src="blank.gif" data-src="images/5.jpg"></div>
		<div class="item" data-w="276" data-h="180"><img src="blank.gif" data-src="images/6.jpg"></div>
		<div class="item" data-w="319" data-h="180"><img src="blank.gif" data-src="images/7.jpg"></div>
		<div class="item" data-w="270" data-h="180"><img src="blank.gif" data-src="images/8.jpg"></div>
		<div class="item" data-w="240" data-h="180"><img src="blank.gif" data-src="images/9.jpg"></div>
		<div class="item" data-w="270" data-h="180"><img src="blank.gif" data-src="images/10.jpg"></div>
		<div class="item" data-w="240" data-h="180"><img src="blank.gif" data-src="images/11.jpg"></div>
	</div>

	<p style="margin:60px 0 8px">演示样式三</p>
	<div id="demo4" class="flex-images">
		<div class="item" data-w="219" data-h="197">
			<div class="img"><img src="blank.gif" data-src="images/1.jpg"></div>
			<div class="bottom">Caption 1</div>
		</div>
		<div class="item" data-w="279" data-h="197">
			<div class="img"><img src="blank.gif" data-src="images/2.jpg"></div>
			<div class="bottom">Caption 2</div>
		</div>
		<div class="item" data-w="270" data-h="197">
			<div class="img"><img src="blank.gif" data-src="images/3.jpg"></div>
			<div class="bottom">Caption 3</div>
		</div>
		<div class="item" data-w="270" data-h="197">
			<div class="img"><img src="blank.gif" data-src="images/4.jpg"></div>
			<div class="bottom">Caption 4</div>
		</div>
		<div class="item" data-w="147" data-h="197">
			<div class="img"><img src="blank.gif" data-src="images/5.jpg"></div>
			<div class="bottom">Caption 5</div>
		</div>
	</div>

	<p style="margin:60px 0 8px">演示样式四</p>
	<div id="demo5" class="flex-images">
		<div class="item" data-w="219" data-h="180">
			<img src="blank.gif" data-src="images/1.jpg">
			<div class="over">Caption 1</div>
		</div>
		<div class="item" data-w="279" data-h="180">
			<img src="blank.gif" data-src="images/2.jpg">
			<div class="over">Caption 2</div>
		</div>
		<div class="item" data-w="270" data-h="180">
			<img src="blank.gif" data-src="images/3.jpg">
			<div class="over">Caption 3</div>
		</div>
		<div class="item" data-w="270" data-h="180">
			<img src="blank.gif" data-src="images/4.jpg">
			<div class="over">Caption 4</div>
		</div>
		<div class="item" data-w="147" data-h="180">
			<img src="blank.gif" data-src="images/5.jpg">
			<div class="over">Caption 5</div>
		</div>
	</div>

	<p style="margin:60px 0 8px">演示样式五</p>
	<div id="demo6" class="flex-images">
		<div class="item" data-w="450" data-h="300">
			<a target="_blank" href="#">
				<img src="images/1.jpg">
			</a>
		</div>
		<div class="item" data-w="450" data-h="437">
			<a target="_blank" href="#">
				<img src="images/2.jpg">
			</a>
		</div>
		<div class="item" data-w="450" data-h="300">
			<a target="_blank" href="#">
				<img src="images/3.jpg">
			</a>
		</div>
		<div class="item" data-w="450" data-h="298">
			<a target="_blank" href="#">
				<img src="images/4.jpg">
			</a>
		</div>
	</div>
	<p style="margin:15px 0 5px">演示样式六</p>
	<div>
		<img style="max-width:100%" src="images/1.jpg">
	</div>
</div>
<div id="fb-root"></div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.flex-images.js"></script>
<script>
	$('#demo1').flexImages({rowHeight: 140});
	$('#demo2').flexImages({rowHeight: 120, truncate: 1, maxRows: 2});
	$('#demo3').flexImages({object: 'iframe', rowHeight: 200, truncate: 1});
	$('#demo4').flexImages({ truncate: 1 });
	$('#demo5').flexImages({ truncate: 1 });
	$('#demo6').flexImages({ truncate: 1 });
</script>
</body>
</html>

JS代码(jquery.flex-images.min.js):

// jQuery flexImages v1.0.2// https://github.com/Pixabay/jQuery-flexImages!function(t){
	function e(t,a,n,r){
	function o(t){
	n.maxRows&&l>n.maxRows||n.truncate&&t&&l>1?c[g][0].style.display="none":(c[g][5]&&(c[g][4].attr("src",c[g][5]),c[g][5]=""),c[g][0].style.width=s+"px",c[g][0].style.height=u+"px",c[g][0].style.display="block")}
var g,s,f=1,l=1,w=t.width(),c=[],d=0,u=n.rowHeight;
	for(w||(w=t.width()),i=0;
	i<a.length;
	i++)if(c.push(a[i]),d+=a[i][3]+n.margin,d>=w){
	for(f=w/d,u=Math.ceil(n.rowHeight*f),exact_w=0,s,g=0;
	g<c.length;
	g++)s=Math.ceil(c[g][3]*f),exact_w+=s+n.margin,exact_w>w&&(s-=exact_w-w+1),o();
	c=[],d=0,l++}
for(g=0;
	g<c.length;
	g++)s=Math.floor(c[g][3]*f),h=Math.floor(n.rowHeight*f),o(!0);
	r||w==t.width()||e(t,a,n,!0)}
t.fn.flexImages=function(i){
	var a=t.extend({
	container:".item",object:"img",rowHeight:180,maxRows:0,truncate:0}
,i);
	return this.each(function(){
	var i=t(this),n=t(i).find(a.container),r=[],o=(new Date).getTime(),h=window.getComputedStyle?getComputedStyle(n[0],null):n[0].currentStyle;
	for(a.margin=(parseInt(h.marginLeft)||0)+(parseInt(h.marginRight)||0)+(parseInt(h.borderLeftWidth)||0)+(parseInt(h.borderRightWidth)||0),j=0;
	j<n.length;
	j++){
	var g=n[j],s=parseInt(g.getAttribute("data-w")),f=parseInt(g.getAttribute("data-h")),l=s*(a.rowHeight/f),w=t(g).find(a.object);
	r.push([g,s,f,l,w,w.data("src")])}
e(i,r,a),t(window).off("resize.flexImages"+i.data("flex-t")),t(window).on("resize.flexImages"+o,function(){
	e(i,r,a)}
),i.data("flex-t",o)}
)}
}
(jQuery);

CSS代码(jquery.flex-images.css):

.flex-images{overflow:hidden;}
.flex-images .item{float:left;margin:4px;border:1px solid #eee;box-sizing:content-box;overflow:hidden;position:relative;}
.flex-images .item img{display:block;width:auto;height:100%;}

附件:下载该文件资源,减少时间成本(增值服务)