javascript - jQuery Masonry breaking randomly at certain widths -


i'm using jquery masonry develop responsive grid of photos. i'm using simple css proportional grid, , works fine (other fact floats don't work vertically). moment add masonry layout breaks.

$(document).ready(function() {      // select container     var $work   = $(".work");      // set columns based on window width     var columns = 3,         setcolumns = function() { columns = $(window).width() > 768 ? 3 : 2; };      $work.imagesloaded(function() {         $work.masonry({             itemselector: '.project',             columnwidth: function(containerwidth) {                 return containerwidth / columns;             }         });          $(window).on('resize', function() {                     // set columns browser width different.             setcolumns();             $work.masonry('reload');         }).resize();     }); });

a jsfiddle demonstrating issue can found here.

above 768px breakpoint, things work (albeit lots of flickering), below break point should 2 columns fits one.

fixes i've tried:

  • setting columnwidth 1 fixes in safari , firefox, not chrome.
  • setting width of 1 of columns 47.5% instead of 49% (which accounts 1 2% margin), grid doesn't line visually.

i suspect it's widths , margins being ever over, i've checked code thoroughly , numbers should add nice 100% width. it's when masonry comes in breaks.

thoughts? appreciated.

set margins 0 , masonry should fit together. here demo:

http://jsfiddle.net/umgwm/1

/* basic grid structure */  .half, .third, .two-third, .quarter {     float: left;     margin: 0; }     .two-third + .third, .third:nth-child(3n+0), .quarter:nth-child(4n+0) {         margin: 0 0 0 0;     }     .half:nth-child(2n+0), .third:nth-child(3n+0), .quarter:nth-child(3n+0) {         margin-right: 0;     }

Comments

Post a Comment

Popular posts from this blog

ios - iPhone/iPad different view orientations in different views , and apple approval process -

i force app's home screen portrait , other views landscape. apple rejects app if this? if not , how force first screen launch in portrait mode? , force other screens launch in landscape. this not duplicate question search every possible answer in website. i force app's home screen portrait , other views landscape. apple rejects app if this? no apple not reject app this. have lot of apps doesn't support orientation. forcing on 1 screen won't cause app reject. if not , how force first screen launch in portrait mode? , force other screens launch in landscape. can on write : -(nsuinteger)supportedinterfaceorientations; function.
Read more

java Extracting Zip file -

i'm looking way extract zip file. far have tried java.util.zip , org.apache.commons.compress, both gave corrupted output. basically, input zip file contain 1 single .doc file. java.util.zip: output corrupted. org.apache.commons.compress: output blank file, 2 mb size. so far commercial software winrar work perfectly. there java library make use of this? this method using java.util library: public void extractzipnative(file filezip) { zipinputstream zis; stringbuilder sb; try { zis = new zipinputstream(new fileinputstream(filezip)); zipentry ze = zis.getnextentry(); byte[] buffer = new byte[(int) ze.getsize()]; fileoutputstream fos = new fileoutputstream(this.tempfolderpath+ze.getname()); int len; while ((len=zis.read(buffer))>0) { fos.write(buffer); } fos.flush(); fos.close(); } catch (filenotfoundexception e) { // todo auto-generated catch block ...
Read more

C# WinForm - loading screen -

i ask how make loading screen (just picture or something) appears while program being loaded, , disappears when program has finished loading. in fancier versions, have seen process bar (%) displayed. how can have that, , how calculate % show on it? i know there form_load() event, not see form_loaded() event, or % property / attribute anywhere. all need create 1 form splash screen , show before main start showing landing page , close splash once landing page loaded. class splashform { //delegate cross thread call close private delegate void closedelegate(); //the type of form displayed splash screen. private static splashform splashform; static public void showsplashscreen() { // make sure launched once. if (splashform != null) return; thread thread = new thread(new threadstart(splashform.showform)); thread.isbackground = true; thread.setapartmentstate(apartmentstate.sta); thread....
Read more