自动适应瀑布流

短命女 2022-04-22 05:34 189阅读 0赞

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>自动适应瀑布流</title>  
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>  
<style>  
body,html \{  
font-size:100%;  
padding:0;  
margin:0;  
\}  
/\* Reset \*/  
\*,\*:after,\*:before \{  
\-webkit-box-sizing:border-box;  
\-moz-box-sizing:border-box;  
box-sizing:border-box;  
\}  
.clearfix:before,.clearfix:after \{  
content:" ";  
display:table;  
\}  
.clearfix:after \{  
clear:both;  
\}  
body \{  
background:\#494A5F;  
color:\#D5D6E2;  
font-weight:500;  
font-size:1.05em;  
font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;  
\}  
a \{  
color:\#2fa0ec;  
text-decoration:none;  
outline:none;  
\}  
a:hover,a:focus \{  
color:\#74777b;  
\}  
\#gallery-wrapper \{  
position:relative;  
max-width:75%;  
width:75%;  
margin:50px auto;  
\}  
img.thumb \{  
width:100%;  
max-width:100%;  
height:auto;  
\}  
.white-panel \{  
position:absolute;  
background:white;  
border-radius:5px;  
box-shadow:0px 1px 2px rgba(0,0,0,0.3);  
padding:10px;  
\}  
.white-panel h1 \{  
font-size:1em;  
\}  
.white-panel h1 a \{  
color:\#A92733;  
\}  
.white-panel:hover \{  
box-shadow:1px 1px 10px rgba(0,0,0,0.5);  
margin-top:-5px;  
\-webkit-transition:all 0.3s ease-in-out;  
\-moz-transition:all 0.3s ease-in-out;  
\-o-transition:all 0.3s ease-in-out;  
transition:all 0.3s ease-in-out;  
\}  
</style>  
</head>  
<body>  
<section id="gallery-wrapper">  
<article class="white-panel"> <img src="http://www.jq22.com/img/cs/500x500-1.png" class="thumb">  
<h1><a href="\#">Title 1</a></h1>  
<p>Description 1</p>  
</article>  
<article class="white-panel"> <img src="http://www.jq22.com/img/cs/500x500-1.png" class="thumb">  
<h1><a href="\#">Title 2</a></h1>  
<p>Description 2</p>  
</article>  
<article class="white-panel"> <img src="http://www.jq22.com/img/cs/500x500-1.png" class="thumb">  
<h1><a href="\#">Title 3</a></h1>  
<p>Description 3</p>  
</article>  
<article class="white-panel"> <img src="http://www.jq22.com/img/cs/500x500-1.png" class="thumb">  
<h1><a href="\#">Title 4</a></h1>  
<p>Description 4</p>  
</article>  
<article class="white-panel"> <img src="http://www.jq22.com/img/cs/500x500-2.png" class="thumb">  
<h1><a href="\#">Title 5</a></h1>  
<p>Description 5</p>  
</article>  
<article class="white-panel"> <img src="http://www.jq22.com/img/cs/500x500-1.png" class="thumb">  
<h1><a href="\#">Title 6</a></h1>  
<p>Description 6</p>  
</article>  
<article class="white-panel"> <img src="http://www.jq22.com/img/cs/500x500-1.png" class="thumb">  
<h1><a href="\#">Title 7</a></h1>  
<p>Description 7</p>  
</article>  
<article class="white-panel"> <img src="http://www.jq22.com/img/cs/500x500-1.png" class="thumb">  
<h1><a href="\#">Title 8</a></h1>  
<p>Description 8</p>  
</article>  
</section>

\});  
</script>

usage:

$(document).ready(function() \{

$('\#blog-landing').pinterest\_grid(\{  
no\_columns: 4  
\});

\});  
\*/  
;  
(function($, window, document, undefined) \{  
var pluginName = 'pinterest\_grid',  
defaults = \{  
padding\_x: 10,  
padding\_y: 10,  
no\_columns: 3,  
margin\_bottom: 50,  
single\_column\_breakpoint: 700  
\},  
columns,  
$article,  
article\_width;

function Plugin(element, options) \{  
this.element = element;  
this.options = $.extend(\{\}, defaults, options);  
this.\_defaults = defaults;  
this.\_name = pluginName;  
this.init();  
\}

Plugin.prototype.init = function() \{  
var self = this,  
resize\_finish;

$(window).resize(function() \{  
clearTimeout(resize\_finish);  
resize\_finish = setTimeout(function() \{  
self.make\_layout\_change(self);  
\}, 11);  
\});

self.make\_layout\_change(self);

setTimeout(function() \{  
$(window).resize();  
\}, 500);  
\};

Plugin.prototype.calculate = function(single\_column\_mode) \{  
var self = this,  
tallest = 0,  
row = 0,  
$container = $(this.element),  
container\_width = $container.width();  
$article = $(this.element).children();

if (single\_column\_mode === true) \{  
article\_width = $container.width() - self.options.padding\_x;  
\} else \{  
article\_width = ($container.width() - self.options.padding\_x \* self.options.no\_columns) / self.options.no\_columns;  
\}

$article.each(function() \{  
$(this).css('width', article\_width);  
\});

columns = self.options.no\_columns;

$article.each(function(index) \{  
var current\_column,  
left\_out = 0,  
top = 0,  
$this = $(this),  
prevAll = $this.prevAll(),  
tallest = 0;

if (single\_column\_mode === false) \{  
current\_column = (index % columns);  
\} else \{  
current\_column = 0;  
\}

for (var t = 0; t < columns; t++) \{  
$this.removeClass('c' + t);  
\}

if (index % columns === 0) \{  
row++;  
\}

$this.addClass('c' + current\_column);  
$this.addClass('r' + row);

prevAll.each(function(index) \{  
if ($(this).hasClass('c' + current\_column)) \{  
top += $(this).outerHeight() + self.options.padding\_y;  
\}  
\});

if (single\_column\_mode === true) \{  
left\_out = 0;  
\} else \{  
left\_out = (index % columns) \* (article\_width + self.options.padding\_x);  
\}

$this.css(\{  
'left': left\_out,  
'top': top  
\});  
\});

this.tallest($container);  
$(window).resize();  
\};

Plugin.prototype.tallest = function(\_container) \{  
var column\_heights = \[\],  
largest = 0;

for (var z = 0; z < columns; z++) \{  
var temp\_height = 0;  
\_container.find('.c' + z).each(function() \{  
temp\_height += $(this).outerHeight();  
\});  
column\_heights\[z\] = temp\_height;  
\}

largest = Math.max.apply(Math, column\_heights);  
\_container.css('height', largest + (this.options.padding\_y + this.options.margin\_bottom));  
\};

Plugin.prototype.make\_layout\_change = function(\_self) \{  
if ($(window).width() < \_self.options.single\_column\_breakpoint) \{  
\_self.calculate(true);  
\} else \{  
\_self.calculate(false);  
\}  
\};

$.fn\[pluginName\] = function(options) \{  
return this.each(function() \{  
if (!$.data(this, 'plugin\_' + pluginName)) \{  
$.data(this, 'plugin\_' + pluginName,  
new Plugin(this, options));  
\}  
\});  
\}

\})(jQuery, window, document);  
</script>

</body>  
</html>