source: t29-www/shared/js-v6/pagescripts/news.js @ 601

Last change on this file since 601 was 601, checked in by sven, 10 years ago

Masonry-Bibliothek um "Masonry-Ordered" erweitert, um die
Ordnung (erst horizontal, dann vertikal) aufrechtzuerhalten.

File size: 10.0 KB
Line 
1$(function(){
2        // start masonry on news
3        news_container = $("ul.news-feed");
4  news_container.removeClass("news-ng").addClass("news-masonry");
5
6        /*msnry = new Masonry( news_container[0], {
7                //  columnWidth: 200,
8                itemSelector: 'li'
9        });*/
10        news_container.masonry({
11                itemSelector: 'li'
12        });
13});
14
15// EIN ALTES MASONRY zusammen mit der Ordered-Extension
16
17/**
18 * jQuery Masonry v2.0.110524
19 * A dynamic layout plugin for jQuery
20 * The flip-side of CSS Floats
21 * http://masonry.desandro.com
22 *
23 * Licensed under the MIT license.
24 * Copyright 2011 David DeSandro
25 */
26(function(a,b,c){var d=b.event,e;d.special.smartresize={setup:function(){b(this).bind("resize",d.special.smartresize.handler)},teardown:function(){b(this).unbind("resize",d.special.smartresize.handler)},handler:function(a,b){var c=this,d=arguments;a.type="smartresize",e&&clearTimeout(e),e=setTimeout(function(){jQuery.event.handle.apply(c,d)},b==="execAsap"?0:100)}},b.fn.smartresize=function(a){return a?this.bind("smartresize",a):this.trigger("smartresize",["execAsap"])},b.Mason=function(a,c){this.element=b(c),this._create(a),this._init()};var f=["position","height"];b.Mason.settings={isResizable:!0,isAnimated:!1,animationOptions:{queue:!1,duration:500},gutterWidth:0,isRTL:!1,isFitWidth:!1},b.Mason.prototype={_filterFindBricks:function(a){var b=this.options.itemSelector;return b?a.filter(b).add(a.find(b)):a},_getBricks:function(a){var b=this._filterFindBricks(a).css({position:"absolute"}).addClass("masonry-brick");return b},_create:function(c){this.options=b.extend(!0,{},b.Mason.settings,c),this.styleQueue=[],this.reloadItems();var d=this.element[0].style;this.originalStyle={};for(var e=0,g=f.length;e<g;e++){var h=f[e];this.originalStyle[h]=d[h]||null}this.element.css({position:"relative"}),this.horizontalDirection=this.options.isRTL?"right":"left",this.offset={};var i=b(document.createElement("div"));this.element.prepend(i),this.offset.y=Math.round(i.position().top),this.options.isRTL?(i.css({"float":"right",display:"inline-block"}),this.offset.x=Math.round(this.element.outerWidth()-i.position().left)):this.offset.x=Math.round(i.position().left),i.remove();var j=this;setTimeout(function(){j.element.addClass("masonry")},0),this.options.isResizable&&b(a).bind("smartresize.masonry",function(){j.resize()})},_init:function(a){this._getColumns("masonry"),this._reLayout(a)},option:function(a,c){b.isPlainObject(a)&&(this.options=b.extend(!0,this.options,a))},layout:function(a,c){var d,e,f,g,h,i;for(var j=0,k=a.length;j<k;j++){d=b(a[j]),e=Math.ceil(d.outerWidth(!0)/this.columnWidth),e=Math.min(e,this.cols);if(e===1)this._placeBrick(d,this.colYs);else{f=this.cols+1-e,g=[];for(i=0;i<f;i++)h=this.colYs.slice(i,i+e),g[i]=Math.max.apply(Math,h);this._placeBrick(d,g)}}var l={};l.height=Math.max.apply(Math,this.colYs)-this.offset.y,this.options.isFitWidth&&(l.width=this.cols*this.columnWidth-this.options.gutterWidth),this.styleQueue.push({$el:this.element,style:l});var m=this.isLaidOut?this.options.isAnimated?"animate":"css":"css",n=this.options.animationOptions,o;for(j=0,k=this.styleQueue.length;j<k;j++)o=this.styleQueue[j],o.$el[m](o.style,n);this.styleQueue=[],c&&c.call(a),this.isLaidOut=!0},_getColumns:function(){var a=this.options.isFitWidth?this.element.parent():this.element,b=a.width();this.columnWidth=this.options.columnWidth||this.$bricks.outerWidth(!0)||b,this.columnWidth+=this.options.gutterWidth,this.cols=Math.floor((b+this.options.gutterWidth)/this.columnWidth),this.cols=Math.max(this.cols,1)},_placeBrick:function(a,b){var c=Math.min.apply(Math,b),d=0;for(var e=0,f=b.length;e<f;e++)if(b[e]===c){d=e;break}var g={top:c};g[this.horizontalDirection]=this.columnWidth*d+this.offset.x,this.styleQueue.push({$el:a,style:g});var h=c+a.outerHeight(!0),i=this.cols+1-f;for(e=0;e<i;e++)this.colYs[d+e]=h},resize:function(){var a=this.cols;this._getColumns("masonry"),this.cols!==a&&this._reLayout()},_reLayout:function(a){var b=this.cols;this.colYs=[];while(b--)this.colYs.push(this.offset.y);this.layout(this.$bricks,a)},reloadItems:function(){this.$bricks=this._getBricks(this.element.children())},reload:function(a){this.reloadItems(),this._init(a)},appended:function(a,b,c){if(b){this._filterFindBricks(a).css({top:this.element.height()});var d=this;setTimeout(function(){d._appended(a,c)},1)}else this._appended(a,c)},_appended:function(a,b){var c=this._getBricks(a);this.$bricks=this.$bricks.add(c),this.layout(c,b)},remove:function(a){this.$bricks=this.$bricks.not(a),a.remove()},destroy:function(){this.$bricks.removeClass("masonry-brick").each(function(){this.style.position=null,this.style.top=null,this.style.left=null});var c=this.element[0].style;for(var d=0,e=f.length;d<e;d++){var g=f[d];c[g]=this.originalStyle[g]}this.element.unbind(".masonry").removeClass("masonry").removeData("masonry"),b(a).unbind(".masonry")}},b.fn.imagesLoaded=function(a){var b=this.find("img"),d=b.length,e="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",f=this;if(!d){a.call(this);return this}b.bind("load",function(){--d<=0&&this.src!==e&&a.call(f)}).each(function(){if(this.complete||this.complete===c){var a=this.src;this.src=e,this.src=a}});return this},b.fn.masonry=function(a){if(typeof a=="string"){var c=Array.prototype.slice.call(arguments,1);this.each(function(){var d=b.data(this,"masonry");if(!d)return b.error("cannot call methods on masonry prior to initialization; attempted to call method '"+a+"'");if(!b.isFunction(d[a])||a.charAt(0)==="_")return b.error("no such method '"+a+"' for masonry instance");d[a].apply(d,c)})}else this.each(function(){var c=b.data(this,"masonry");c?(c.option(a||{}),c._init()):b.data(this,"masonry",new b.Mason(a,this))});return this}})(window,jQuery);
27
28
29/**
30 * jQuery Masonry Ordered 2.1-beta2
31 * http://masonry-ordered.tasuki.org/
32 *
33 * Enhanced layout strategy for jQuery Masonry:
34 * http://masonry.desandro.com/
35 *
36 * Licensed under the MIT license.
37 * Copyleft 2012 Vit 'tasuki' Brunner
38 */
39
40(function( window, $, undefined ) {
41
42  $.extend(true, $.Mason.settings, {
43    layoutPriorities: {
44      // Masonry default: Try to occupy highest available position.
45      // Weight: Pixels of vertical distance from most upper spot.
46      upperPosition: 1,
47      // Shelf order: Try to display bricks in original order.
48      //   (increases ordered-ness, decreases space-efficiency)
49      // Weight: Pixels of distance of current brick's top left corner
50      //         from previous brick's top right corner.
51      shelfOrder: 1
52    }
53  });
54
55  // layout logic
56  $.Mason.prototype._placeBrick = function( brick ) {
57    var $brick = $(brick),
58        dir = this.horizontalDirection,
59        colSpan, groupCount, groupY, groupColY;
60
61    //how many columns does this brick span
62    colSpan = Math.ceil( $brick.outerWidth(true) /
63      ( this.columnWidth + this.options.gutterWidth ) );
64    colSpan = Math.min( colSpan, this.cols );
65
66    if ( colSpan === 1 ) {
67      // if brick spans only one column, just like singleMode
68      groupY = this.colYs
69    } else {
70      // brick spans more than one column
71      // how many different places could this brick fit horizontally
72      groupCount = this.cols + 1 - colSpan;
73      groupY = [];
74
75      // for each group potential horizontal position
76      for ( var j=0; j < groupCount; j++ ) {
77        // make an array of colY values for that one group
78        groupColY = this.colYs.slice( j, j+colSpan );
79        // and get the max value of the array
80        groupY[j] = Math.max.apply( Math, groupColY );
81      }
82    }
83
84    // get the minimum Y value from the columns
85    var minimumY = Math.min.apply( Math, groupY );
86
87    // point near which the next brick should be
88    var anchorPoint = { top: 0 }
89    anchorPoint[ dir ] = 0;
90
91    // get previous brick details
92    var prevBrick = this.styleQueue.slice(-1)[0];
93    if ( prevBrick != undefined ) {
94      var width  = prevBrick.$el.outerWidth(true);
95      // subtract container's horizontal offset to prevent overflow
96      var offset = prevBrick.style[ dir ] - this.offset.x;
97
98      // align anchor point with previous brick
99      anchorPoint[ dir ] = offset + width;
100      anchorPoint.top = prevBrick.style.top;
101
102      // check if brick fits in row
103      var spaceForBrick = anchorPoint[ dir ] + colSpan * this.columnWidth;
104      var availableSpace = this.cols * this.columnWidth;
105      if ( spaceForBrick > availableSpace ) {
106        // brick doesn't fit in row - reset horizontal position
107        anchorPoint[ dir ] = 0;
108      }
109    }
110
111    // priorities weights for brick laying
112    var priorities = this.options.layoutPriorities;
113    // total penalty for given position
114    var penalty = [];
115
116    // calculate penalty of each position
117    for ( var i=0, len = groupY.length; i < len; i++ ) {
118      // distance of upper left corner from anchor point
119      var horizontal = Math.abs( anchorPoint[ dir ] - this.columnWidth * i );
120      var vertical   = Math.abs( anchorPoint.top  - groupY[i] );
121      var sum_of_powers = Math.pow( horizontal, 2 ) + Math.pow( vertical, 2 );
122      var distance      = Math.round( Math.sqrt( sum_of_powers ) );
123      var shelfPenalty  = priorities.shelfOrder * distance;
124
125      // vertical distance from the most top available spot
126      var upperPenalty = priorities.upperPosition * ( groupY[i] - minimumY );
127
128      // total penalty for column
129      penalty[i] = upperPenalty + shelfPenalty;
130    }
131
132    // get minimum penalty
133    var minPenalty = Math.min.apply( null, penalty );
134
135    // find column with minimum penalty
136    for ( i=0, len = penalty.length; i < len; i++ ) {
137      if ( penalty[i] === minPenalty ) {
138        shortCol = i;
139        break;
140      }
141    }
142
143    // position the brick
144    var position = {
145      top: groupY[shortCol] + this.offset.y
146    };
147    // position.left or position.right
148    position[ dir ] = this.columnWidth * shortCol + this.offset.x;
149    this.styleQueue.push({ $el: $brick, style: position });
150
151    // apply setHeight to necessary columns
152    var setHeight = groupY[ shortCol ] + $brick.outerHeight(true),
153        setSpan = this.cols + 1 - len;
154    for ( i=0; i < setSpan; i++ ) {
155      this.colYs[ shortCol + i ] = setHeight;
156    }
157  }
158})( window, jQuery );
159
160/* vi: set ts=2 sw=2 expandtab: */
161
Note: See TracBrowser for help on using the repository browser.
© 2008 - 2013 technikum29 • Sven Köppel • Some rights reserved
Powered by Trac
Expect where otherwise noted, content on this site is licensed under a Creative Commons 3.0 License