Home > Developer > Web Develop
Work projects need to create a display of mobile web apps to facilitate quick access and evaluation of feedback. On the display page you can see the app display and click into the Web App. I am not a front-end developer, for HTML, CSS, JS these three Musketeers are just knows. So first plan a simple design, feel waterfall flow picture display way more beautiful, at the same time the height of the layout is also certain flexibility. Start with the goal of Pinterest Android/ios and Petal mobile Web app.
The result of the first day was the completion of the basic display and links. The effect on the iphone simulator is as follows
：
HTML page Code snippet:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<! DOCTYPE html>http-equiv="Content-type" content= "text/html; Charset=utf-8 "> <meta charset="Utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <!--...--><!--masonry JS Library Introduction --<script type="Text/javascript" src="Js/masonry-docs.min.js"></script> <body><!--...--><!--masonry initialization method in HTML--<div id="container" class="Js-masonry" > <div class="Hero-item has-example"> <a href="http://datarecovery.duapp.com/"> <p class="Example-title"> Lenovo 3C Service </p>class="Title-icon" src= "Assets/1_logo.png"> class="Tilt" src="Assets/1lenovo3cservice.png"> </a></div><!--...--></body><script type="Text/javascript" src="Assets/jquery.min.js"></script> <script type="Text/javascript" src="assets/topsrh.min.js"></script> <script type="Text/javascript" src="Assets/jquery.qrcode-0.7.0.min.js"></ script> <script type="Text/javascript" src="Assets/cases.min.js"></script> |
The corresponding CSS, the key width of the value, it determines the number of horizontal column, such as here 45%, slightly less than 50%, that is, the horizontal can accommodate two columns:
1 2 3 4 5 6 7 8 9 10 |
. Hero-item, . Hero-masonry . Grid-sizer { width: ; / * Juse a lil under * /margin: 3% 2; /*float:middle; * *Border-radius: 8px; Box-Shadow: 0 1px 3px rgba(0,0,0,. 3); -Moz-Box-Shadow: 0 1px 3px rgba(0,0 ,0,. 3); -webkit-Box-Shadow: 0 1px 3px rgba(0,0, 0,. 3); } |
At this point, a layout problem occurs randomly, and the vertical layout sometimes causes each display to cascade together. Just like this:
The vertical layout problem is relatively easy to appear on the first visit, and then normally returns to normal if it is refreshed one or two times.
The reason comes from the element of the picture and does not specify the height. We want each height of the waterfall to be displayed flexibly and calculated by the layout of the browser. But the asynchronous operation of the browser loading picture and layout calculation leaves the possibility of error here. That is, the image must be load completed before the browser can be based on the natural size of the picture to the height of this left layout. The problem with the load image being later than the layout calculation is that the browser lays out the default height.
W3school the document on the width of the element, height has such a description, it is recommended to specify width, height. Http://www.w3school.com.cn/HTML5/att_img_width.asp. But like any other programming, hard code does not bring the best solution. Is there a way for us to flexibly calculate the height property of and control layout?
Consulted the front-end engineer friend, found the masonry library layout and sizing method, and how to obtain masonry instance method.
In this way, the workaround is to call the layout () method of Masonry in the OnLoad () event of . It is noted here that the instance of masonry is obtained through the method of Masonry.data (). The data () method is masonry, not a masonry instance method. The code is as follows: (Official document Http://masonry.desandro.com/methods.html. ）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(function() { var imgs = $("img"); for (var i=0,len=IMGs. Length; I<len; I+ +) { //Get masonry HTML elementvar container = document. Queryselector(' #container '); //Get Masonry instancevar msnry = masonry. Data( container ); //Perform layout () in onload ( )IMGs[i]. OnLoad = function() { msnry. Layout(); }}});</script> |
Problem Solving!!
Play Masonry JS Library to achieve Waterfall streaming web effects
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
