Skip to content

Instantly share code, notes, and snippets.

@jasonsturges

jasonsturges/index.html

Last active January 6, 2017 19:12
Show Gist options
  • Save jasonsturges/705090f8af5a246fe334727dde0f56b1 to your computer and use it in GitHub Desktop.
Save jasonsturges/705090f8af5a246fe334727dde0f56b1 to your computer and use it in GitHub Desktop.
Download ZIP
Flexbox masonry grid, similar to 500px image layout, from example: https://github.com/xieranmaya/blog/issues/6
Raw
index.html
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1080">
<title>Cats</title>
<style>
body {
margin: 0;
overflow-x: hidden;
}
.fav-list {
display: flex;
flex-wrap: wrap;
margin: 2px;
}
.fav-list > div {
margin: 2px;
background-color: violet;
position: relative;
}
.fav-list > div > i {
display: block;
background-color: lightblue;
/* display: none; */
}
.fav-list > div > img {
position: absolute;
vertical-align: bottom;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.fav-list > .placeholder {
flex-grow: 100;
flex-basis: 240px;
height: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="fav-list">
<!--<div>flex，wrap-->
<!--<div style="width:{{img.width*200/img.height}}px;flex-grow:{{img.width*200/img.height}}">-->
<!--<div style="padding-bottom:{{img.height/img.width*100}}%"></div>-->
<!--</div>-->
<!--</div>-->
<!-- ngRepeat: img in imgs -->
<div style="flex-grow:70.57291666666667;flex-basis:169.375px;">
<i style="padding-bottom:141.69741697416973%"></i>
<img src="stock-photo-34598868.jpg">
</div>
<div style="flex-grow:150.03750937734435;flex-basis:360.0900225056264px;">
<i style="padding-bottom:66.64999999999999%"></i>
<img src="stock-photo-75097491.jpg">
</div>
<div style="flex-grow:100;flex-basis:240px;">
<i style="padding-bottom:100%"></i>
<img src="stock-photo-144730939.jpg">
</div>
<div style="flex-grow:125.70710245128849;flex-basis:301.6970458830924px;">
<i style="padding-bottom:79.55%"></i>
<img src="stock-photo-81390687.jpg">
</div>
<div style="flex-grow:150.03750937734435;flex-basis:360.0900225056264px;">
<i style="padding-bottom:66.64999999999999%"></i>
<img src="stock-photo-75186237.jpg">
</div>
<div style="flex-grow:149.7005988023952;flex-basis:359.2814371257485px;">
<i style="padding-bottom:66.8%"></i>
<img src="stock-photo-135203031.jpg">
</div>
<div style="flex-grow:150;flex-basis:360px;">
<i style="padding-bottom:66.66666666666666%"></i>
<img src="photo-115203323.jpg">
</div>
<div style="flex-grow:149.92503748125938;flex-basis:359.82008995502247px;">
<i style="padding-bottom:66.7%"></i>
<img src="stock-photo-132586903.jpg">
</div>
<div style="flex-grow:149.81273408239701;flex-basis:359.55056179775283px;">
<i style="padding-bottom:66.75%"></i>
<img src="stock-photo-71801901.jpg">
</div>
<div style="flex-grow:132.35294117647058;flex-basis:317.6470588235294px;">
<i style="padding-bottom:75.55555555555556%"></i>
<img src="stock-photo-148704233.jpg">
</div>
<div style="flex-grow:150.03750937734435;flex-basis:360.0900225056264px;">
<i style="padding-bottom:66.64999999999999%"></i>
<img src="stock-photo-123942383.jpg">
</div>
<div style="flex-grow:150.03750937734435;flex-basis:360.0900225056264px;">
<i style="padding-bottom:66.64999999999999%"></i>
<img src="stock-photo-72620185.jpg">
</div>
<div style="flex-grow:100;flex-basis:240px;">
<i style="padding-bottom:100%"></i>
<img src="stock-photo-70461471.jpg">
</div>
<div style="flex-grow:150.03750937734435;flex-basis:360.0900225056264px;">
<i style="padding-bottom:66.64999999999999%"></i>
<img src="stock-photo-47252094.jpg">
</div>
<div style="flex-grow:149.36519790888724;flex-basis:358.4764749813294px;">
<i style="padding-bottom:66.95%"></i>
<img src="stock-photo-132118343.jpg">
</div>
<div style="flex-grow:154.08320493066256;flex-basis:369.79969183359015px;">
<i style="padding-bottom:64.9%"></i>
<img src="stock-photo-143181649.jpg">
</div>
<div style="flex-grow:177.77777777777777;flex-basis:426.6666666666667px;">
<i style="padding-bottom:56.25%"></i>
<img src="stock-photo-132311221.jpg">
</div>
<div style="flex-grow:149.81273408239701;flex-basis:359.55056179775283px;">
<i style="padding-bottom:66.75%"></i>
<img src="stock-photo-146038669.jpg">
</div>
<div style="flex-grow:66.66666666666667;flex-basis:160px;">
<i style="padding-bottom:150%"></i>
<img src="stock-photo-145414771.jpg">
</div>
<div style="flex-grow:66.6;flex-basis:159.84px;">
<i style="padding-bottom:150.15015015015015%"></i>
<img src="stock-photo-74402039.jpg">
</div>
<div style="flex-grow:149.35064935064935;flex-basis:358.4415584415584px;">
<i style="padding-bottom:66.95652173913044%"></i>
<img src="stock-photo-65681789.jpg">
</div>
<div style="flex-grow:150.03750937734435;flex-basis:360.0900225056264px;">
<i style="padding-bottom:66.64999999999999%"></i>
<img src="stock-photo-144530143.jpg">
</div>
<div style="flex-grow:150.9433962264151;flex-basis:362.2641509433962px;">
<i style="padding-bottom:66.25%"></i>
<img src="stock-photo-79250373.jpg">
</div>
<div style="flex-grow:150;flex-basis:360px;">
<i style="padding-bottom:66.66666666666666%"></i>
<img src="stock-photo-108273877.jpg">
</div>
<div style="flex-grow:150.03750937734435;flex-basis:360.0900225056264px;">
<i style="padding-bottom:66.64999999999999%"></i>
<img src="stock-photo-31201539.jpg">
</div>
<div style="flex-grow:66.23931623931624;flex-basis:158.97435897435898px;">
<i style="padding-bottom:150.96774193548387%"></i>
<img src="stock-photo-83149705.jpg">
</div>
<div style="flex-grow:84.3;flex-basis:202.32px;">
<i style="padding-bottom:118.62396204033215%"></i>
<img src="stock-photo-143046061.jpg">
</div>
<div style="flex-grow:150.58823529411765;flex-basis:361.4117647058824px;">
<i style="padding-bottom:66.40625%"></i>
<img src="stock-photo-7979718.jpg">
</div>
<div style="flex-grow:177.77777777777777;flex-basis:426.6666666666667px;">
<i style="padding-bottom:56.25%"></i>
<img src="stock-photo-142950305.jpg">
</div>
<div style="flex-grow:84.3;flex-basis:202.32px;">
<i style="padding-bottom:118.62396204033215%"></i>
<img src="stock-photo-146914861.jpg">
</div>
<div style="flex-grow:148.3679525222552;flex-basis:356.08308605341244px;">
<i style="padding-bottom:67.4%"></i>
<img src="stock-photo-136947953.jpg">
</div>
<div style="flex-grow:133.33333333333334;flex-basis:320px;">
<i style="padding-bottom:75%"></i>
<img src="stock-photo-135626379.jpg">
</div>
<div style="flex-grow:150.58823529411765;flex-basis:361.4117647058824px;">
<i style="padding-bottom:66.40625%"></i>
<img src="stock-photo-7980252.jpg">
</div>
<div style="flex-grow:149.81273408239701;flex-basis:359.55056179775283px;">
<i style="padding-bottom:66.75%"></i>
<img src="stock-photo-146231033.jpg">
</div>
<div style="flex-grow:150.03750937734435;flex-basis:360.0900225056264px;">
<i style="padding-bottom:66.64999999999999%"></i>
<img src="stock-photo-138378295.jpg">
</div>
<div style="flex-grow:150.03750937734435;flex-basis:360.0900225056264px;">
<i style="padding-bottom:66.64999999999999%"></i>
<img src="stock-photo-21964829.jpg">
</div>
<div style="flex-grow:67;flex-basis:160.8px;">
<i style="padding-bottom:149.2537313432836%"></i>
<img src="stock-photo-79692589.jpg">
</div>
<div style="flex-grow:149.8079385403329;flex-basis:359.539052496799px;">
<i style="padding-bottom:66.75213675213675%"></i>
<img src="stock-photo-148015373.jpg">
</div>
<div style="flex-grow:75;flex-basis:180px;">
<i style="padding-bottom:133.33333333333331%"></i>
<img src="photo-103450229.jpg">
</div>
<div style="flex-grow:149.81273408239701;flex-basis:359.55056179775283px;">
<i style="padding-bottom:66.75%"></i>
<img src="stock-photo-72223295.jpg">
</div>
<div style="flex-grow:150.03750937734435;flex-basis:360.0900225056264px;">
<i style="padding-bottom:66.64999999999999%"></i>
<img src="stock-photo-138436811.jpg">
</div>
<div style="flex-grow:66.7;flex-basis:160.08px;">
<i style="padding-bottom:149.92503748125935%"></i>
<img src="stock-photo-81988949.jpg">
</div>
<div style="flex-grow:150.6024096385542;flex-basis:361.4457831325301px;">
<i style="padding-bottom:66.4%"></i>
<img src="stock-photo-71913567.jpg">
</div>
<div style="flex-grow:133.33333333333334;flex-basis:320px;">
<i style="padding-bottom:75%"></i>
<img src="stock-photo-23583825.jpg">
</div>
<div style="flex-grow:150.03750937734435;flex-basis:360.0900225056264px;">
<i style="padding-bottom:66.64999999999999%"></i>
<img src="stock-photo-21951271.jpg">
</div>
<div style="flex-grow:149.92503748125938;flex-basis:359.82008995502247px;">
<i style="padding-bottom:66.7%"></i>
<img src="stock-photo-147877407.jpg">
</div>
<div style="flex-grow:149.8079385403329;flex-basis:359.539052496799px;">
<i style="padding-bottom:66.75213675213675%"></i>
<img src="stock-photo-148928293.jpg">
</div>
<div style="flex-grow:150;flex-basis:360px;">
<i style="padding-bottom:66.66666666666666%"></i>
<img src="stock-photo-132046989.jpg">
</div>
<div style="flex-grow:150.03750937734435;flex-basis:360.0900225056264px;">
<i style="padding-bottom:66.64999999999999%"></i>
<img src="stock-photo-147969173.jpg">
</div>
<div style="flex-grow:150.96774193548387;flex-basis:362.3225806451613px;">
<i style="padding-bottom:66.23931623931624%"></i>
<img src="stock-photo-148950715.jpg">
</div>
<div style="flex-grow:150.03750937734435;flex-basis:360.0900225056264px;">
<i style="padding-bottom:66.64999999999999%"></i>
<img src="stock-photo-22618399.jpg">
</div>
<div style="flex-grow:150.03750937734435;flex-basis:360.0900225056264px;">
<i style="padding-bottom:66.64999999999999%"></i>
<img src="stock-photo-124559545.jpg">
</div>
<div style="flex-grow:66.6;flex-basis:159.84px;">
<i style="padding-bottom:150.15015015015015%"></i>
<img src="stock-photo-55601508.jpg">
</div>
<div style="flex-grow:66.6;flex-basis:159.84px;">
<i style="padding-bottom:150.15015015015015%"></i>
<img src="stock-photo-51980510.jpg">
</div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment