"Pinterest-like Responsive Grid"
Bootstrap 3.3.0 Snippet by xrozix

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <section id="pinBoot"> <article class="white-panel"><img src="http://champignonkwekerij.be/develop/appbay/afbeelding/champignonkompost.jpg" alt=""> <h4><a href="#">Paddenstoelenwandeling</a></h4> <p>Van het totale gewicht aan verse compost waarmee een teelt wordt begonnen, blijft aan het einde ongeveer de helft over. </p> <p>Afgewerkte champignonmest wordt veel voor bemestingsdoeleinden gebruikt en wordt daarom regelmatig geanalyseerd. Verder kan je afgewerkte champignonmest ook gebruiken tussen de groenten en bloemen. </p> <p>Bij koud weer zorgt het voor bescherming en bij warm weer voorkomt het uitdroging van de grond. Wanneer je wat champost tussen de bloemen en groenten aanbrengt zorgt het ervoor dat je ook weinig onkruid zal bespeuren. In het algemeen wordt champost beschouwd als een aantrekkelijk materiaal om de bodemstructuur te verbeteren. Het bevat veel organische stof, weinig zware metalen en geen onkruidzaden of ziektekiemen die schadelijk zijn. </p> <p> Wel moet bij het gebruik ervan rekening worden gehouden met het hoge kalk-en zoutgehalte. Calcium komt voornamelijk voor als CaCO3 maar ook als CaSO4. Calcium kan een probleem vormen als champost wordt toegepast in teelten die een lage pH nodig hebben terwijl het oplosbare zout een probleem kan vormen in gronden die al veel zout bevatten of in zoutgevoelige gewassen. In serres is de kans op deze problemen groter dan in vollegrondsteelten. Bij gebruik in serres is het dus ook aangeraden de champost tijdig te vermengen met de grond. </p> <p> Bij het gebruik van champost wordt een belangrijke hoeveelheid organische stof aan de bodem toegevoegd. Organische stof heeft een positieve invloed op de structuur van de grond. Hoe meer organische stof een grond bevat, hoe groter het vochthoudende vermogen is. Dit is met name van belang op droge gronden. Organische stof absorbeert mineralen als kalium, calcium, magnesium en ammonium. Deze spoelen daardoor minder snel uit. </p> <p>Je kan best vooraf contact met ons opnemen indien je champost wenst aan te kopen. Te verkrijgen per zak of per aanhangwagen. De samenstelling: (per ton verse champost)</p> <table class="table "> <tbody> <tr> <td>droge stof </td> <td>340 kg </td> </tr> <tr> <td>organische stof</td> <td>214 kg </td> </tr> <tr> <td>soortelijk gewicht</td> <td>500 kg/m3 </td> </tr> <tr> <td>Stikstof (N)</td> <td>6,3 kg </td> </tr> <tr> <td>P2O5</td> <td>4,0 kg</td> </tr> <tr> <td>CaO</td> <td>45,0 kg </td> </tr> <tr> <td>MgO</td> <td>2,4 kg</td> </tr> </table> </tbody> </article> <article class="white-panel"> <img src="http://roosendaal.groei.nl/fileadmin/Afdelingen/Roosendaal/201311/paddenstoelenwandeling/paddenstoelenwandeling__2_.jpg" alt=""> <h4><a href="#">Groei van een paddenstoel</a></h4> <p>De paddestoelen in onze provincie groeien dit jaar veel vroeger dan normaal. De eerste paddestoelen komen normaal pas in de herfst boven de grond, maar zijn nu in augustus al te bewonderen. </p> </article> <article class="white-panel"> <img src="http://www.odeaanaude.eu/catalogaude2/images/montolieu76.jpg" alt=""> <h4><a href="#">Truffel degustatie</a></h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute lpa qui officia deserunt mollit anim id est laborum.</p> </article> </section> <hr> </div> <p> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2FZkk0O" target="_blank"><small>HTML</small><sup>5</sup></a> <br> <br> </p> </div>
/* Ref: Thanks to: http://www.jqueryscript.net/layout/Simple-jQuery-Plugin-To-Create-Pinterest-Style-Grid-Layout-Pinterest-Grid.html */ body { background-color:#eee; } #pinBoot { position: relative; max-width: 100%; width: 100%; } img { width: 100%; max-width: 100%; height: auto; } .white-panel { position: absolute; background: white; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); padding: 10px; } /* stylize any heading tags withing white-panel below */ .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; }
$(document).ready(function() { $('#pinBoot').pinterest_grid({ no_columns: 1, padding_x: 50, padding_y: 50, margin_bottom: 50, single_column_breakpoint: 700 }); }); /* Ref: Thanks to: http://www.jqueryscript.net/layout/Simple-jQuery-Plugin-To-Create-Pinterest-Style-Grid-Layout-Pinterest-Grid.html */ /* Pinterest Grid Plugin Copyright 2014 Mediademons @author smm 16/04/2014 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);

Related: See More


Questions / Comments: