javascript - Masonry: Images overlapping above each other -

-

i'm new js. i'd achieve effect showcasing photos: kristianhammerstad.com

i'm using masonry, see code: http://codepen.io/kiks/pen/ywznjr images have same width different height. that's rule.

the problem shown on video simulation: jmp.sh/mmcu1bb – images have different height, grid broken , images placed on each other. when have same height of linked images, grid ok.

funny thing issue see in video on website (chrome, safari) it's working nicely in codepen (after first load, if resize browser window, ok). can explain this? special codepen include there?

this code. tell me i'm missing , where? i'm learning, please have patience. thank you

/* masonry magic */  .container { width: 96% !important; margin: 0 auto; }  * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }  #masonry { margin: 0 auto; width: 100%; position: relative; /*z-index:2001;*/ }  .item {     width: 460px; height: auto; background: invisible;         margin: 0 auto 20px auto;     /*float: left;*/ }  .card-text {     width: 460px;     padding-right: 40px; }  /* end of masonry magic */  body { padding-top: 60px; }  .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; }  .lead {     font-weight: 400;     font-size: 24px;     line-height: 1.6;     color: #444444;     margin-bottom: 40px; }  .text {     text-align: left;     font-size: 18px;     line-height: 1.7;     color: #444444;  }  p {     margin-bottom: 20px; } 
<html lang="en">   <head>     <meta charset="utf-8">     <meta http-equiv="x-ua-compatible" content="ie=edge">     <meta name="viewport" content="width=device-width, initial-scale=1">      <title>image showcase bootstrap</title>      <!-- latest compiled , minified css -->     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mtjoasx8j1au+a5wdvnpi2lkffwweaa8hdddjzlplegxhjvme1fgjwpgmkzs7" crossorigin="anonymous">      <!-- own styles -->     <link href="css/style.css" rel="stylesheet">    </head>    <body>     <div class="container">  <!--     <div id="masonry">         <div class="item"><img src="http://placehold.it/460x500"></div>         <div class="item"><img src="http://placehold.it/460x500"></div>         <div class="item"><img src="http://placehold.it/460x500"></div>         <div class="item"><img src="http://placehold.it/460x500"></div>         <div class="item"><img src="http://placehold.it/460x500"></div>         <div class="item"><img src="http://placehold.it/460x500"></div>         <div class="item"><img src="http://placehold.it/460x500"></div>         <div class="item"><img src="http://placehold.it/460x500"></div>     </div> -->      <div id="masonry">         <div class="item"><img src="http://placehold.it/460x500"></div>         <div class="item"><img src="http://placehold.it/460x800"></div>         <div class="item"><img src="http://placehold.it/460x600"></div>         <div class="item"><img src="http://placehold.it/460x460"></div>         <div class="item"><img src="http://placehold.it/460x300"></div>         <div class="item"><img src="http://placehold.it/460x400"></div>         <div class="item"><img src="http://placehold.it/460x200"></div>         <div class="item"><img src="http://placehold.it/460x500"></div>     </div>      </div><!-- /.container -->       <!-- bootstrap core javascript     ================================================== -->     <!-- placed @ end of document pages load faster -->     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>     <script>window.jquery || document.write('<script src="js/vendor/jquery.min.js"><\/script>')</script>     <script src="js/bootstrap.min.js"></script>      <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.0/masonry.pkgd.min.js"></script>     <script>       var container = document.queryselector('#masonry');       var msnry = new masonry( container, {         columnwidth: 460,         gutter: 20,         isfitwidth: true,         itemselector: '.item'       });     </script>    </body> </html>

i found it! 1 bracket in addition. now, i'm not loading whole window, div images. hope it's okay looks code works properly.

working code: http://codepen.io/kiks/pen/olnbrg

$('#masonry').imagesloaded(function() {             $('#masonry').masonry({                 itemselector : '.item',                 columnwidth : 460,                 isanimated: true,                 gutter: 20,                 isfitwidth: true,                 animationoptions: {                     duration: 700,                     easing: 'linear',                     queue: false                 }             });         });

although, there's still tiny problem. how can see 1 column before proper grid created: http://jmp.sh/5wqef4q (i'm refreshing page twice)

any ideas how nice grid immediately?


Comments

Post a Comment

Popular posts from this blog

ios - RestKit 0.20 — CoreData: error: Failed to call designated initializer on NSManagedObject class (again) -

-
this error has shown on many times, seems. prominent answer issue seems restkit 0.20 — coredata: error: failed call designated initializer on nsmanagedobject class however, solution posted doesn't work me. let's start beginning: i want upload file server. want parse response make sure uploaded. if not, try again later. model has boolean variable called nsnumber *senttoserver purpose (in coredata, bool saved nsnumber ) . because don't know whether sending going successful, save entity coredata model first before sending via restkit. when post request successful, server returns json string this: {"id":14,"created":true} notice that, of course, id not set on coredata model yet, both id , created new informations model. here's model: @interface recording : nsmanagedobject @property (nonatomic, retain) nsstring * audiofilepath; @property (nonatomic, retain) nsdate * createdat; @property (nonatomic, retain) nsstring * deviceid; @...
Read more

java - Digest auth with Spring Security using javaconfig -

-
so i'm trying create digest authentication spring following documentation trying translate xml "requirements" in java requirements. let's have xml in docs: <bean id="digestfilter" class= "org.springframework.security.web.authentication.www.digestauthenticationfilter"> <property name="userdetailsservice" ref="jdbcdaoimpl"/> <property name="authenticationentrypoint" ref="digestentrypoint"/> <property name="usercache" ref="usercache"/> </bean> <bean id="digestentrypoint" class= "org.springframework.security.web.authentication.www.digestauthenticationentrypoint"> <property name="realmname" value="contacts realm via digest authentication"/> <property name="key" value="acegi"/> <property name="noncevalidityseconds" value="10"/> </b...
Read more

laravel - PDOException in Connector.php line 55: SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: YES) -

-
my .env: app_env=local app_debug=true app_key=myappkey app_url=http://localhost db_connection=mysql db_host=localhost db_port=3306 db_database=gestiontaller db_username=root db_password='root' cache_driver=file session_driver=file queue_driver=sync redis_host=127.0.0.1 redis_password=null redis_port=6379 mail_driver=smtp mail_host=mailtrap.io mail_port=2525 mail_username=null mail_password=null mail_encryption=null i've tried password ", ' , without, restarting server every time. i've tried changing localhost 172.0.0.1. yes, password correct, running mysql -u root -p introducing password root in prompt can go mysql. users table: +------------------+-----------+ | user | host | +------------------+-----------+ | debian-sys-maint | localhost | | mysql.sys | localhost | | root | localhost | | root1 | localhost | +------------------+-----------+ i've added homestead.yaml this: database_port: 3306 ...
Read more