develop/15_third_masonry.html at master · emmi2008/develop · GitHub

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
 <head>
  <title> </title>
  <meta charset="utf-8"/>
	<style>
		.block{width:300px;}
	</style>
 </head>

 <body>
  <h1>使用第三方插件函数</h1>
  <h3>瀑布流插件</h3>
	<div class="container">
		<div class="block">1. <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla eos blanditiis accusantium adipisci minima animi dignissimos eum quod quas inventore cupiditate ad cumque molestiae nobis labore nemo officiis rem. Rem!</div>
		<div>Fugit consequatur deserunt laborum sunt impedit similique nihil velit veritatis debitis delectus quasi id non recusandae corporis sequi dignissimos tenetur ab illum minima quaerat odit quisquam quos repellat quae temporibus.</div></div>
		<div class="block">2. <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa sed error cumque eius laboriosam nobis harum repudiandae quia. Ex voluptatum molestias ea facilis cupiditate dicta perspiciatis corporis ratione maiores temporibus.</div>
		<div>Dolor asperiores recusandae molestiae blanditiis temporibus harum voluptate fugiat eos at consequuntur iure expedita est consequatur sequi minima dolore ut optio voluptatem odit impedit. Qui odit fuga soluta esse voluptates.</div>
		<div>Provident voluptatibus non consequuntur voluptas vitae eos consectetur possimus sequi nesciunt tenetur veritatis quisquam. Modi maiores reprehenderit natus corporis dolor enim rem quo soluta esse eligendi at odio beatae possimus?</div></div>
		<div class="block">3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio iusto provident est atque ad illum ea hic quibusdam quas cumque aut quia cum dolore voluptatibus quos reiciendis dolor recusandae doloremque.</div>
		<div class="block">4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente consectetur tempora nulla similique beatae quas laborum quaerat iste consequuntur atque nam dolorum asperiores error voluptates sequi nemo ex magni. Asperiores.</div>
		<div class="block">5. <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis ad sapiente nam velit assumenda. Animi nulla accusantium tenetur voluptatibus pariatur nisi quos vel assumenda cum maxime tempore eaque nobis suscipit.</div>
		<div>Nam voluptatem aliquid veniam necessitatibus quae dolore iure illum ab est recusandae veritatis dolorem rem amet. Omnis mollitia iste maxime aspernatur labore officiis unde commodi deleniti voluptas enim atque aliquid?</div>
		<div>Fuga quidem distinctio excepturi magnam impedit enim ad debitis explicabo iste architecto! Rem sequi quod optio consectetur nobis explicabo minima fugiat amet numquam pariatur. Harum voluptate officia doloribus fugit aperiam!</div></div>
		<div class="block">6. <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem qui enim sint quasi nisi eum voluptatibus fugiat vel necessitatibus numquam quisquam odio soluta voluptatum accusamus minima blanditiis est. Laboriosam aliquam.</div>
		<div>Labore nostrum natus dolorum quos deleniti debitis id culpa reprehenderit obcaecati repudiandae officiis mollitia pariatur odit porro dolores libero possimus excepturi. Delectus quas aliquam nisi ad labore repellat itaque odio?</div>
		<div>Est quia porro sit aut exercitationem enim aliquam. Deleniti labore commodi dolores explicabo nemo eaque repudiandae impedit ipsam earum accusantium delectus vitae quisquam inventore sunt error possimus quod laudantium sint.</div></div>
		<div class="block">7. <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam doloribus in dicta dolores ad nihil quas similique impedit placeat aperiam ipsum debitis ducimus sequi nesciunt aut harum soluta! Fugiat odit!</div>
		<div>Maiores aliquam necessitatibus minima cum corporis at ea similique perspiciatis dignissimos velit dolor odio placeat? Voluptates magni quae ipsam maiores quaerat sequi illum accusamus perferendis! Voluptatem ipsa tempora ipsum eligendi.</div></div>
		<div class="block">8. <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas incidunt porro minus vel voluptatum iure reprehenderit optio culpa at sed tempore provident facilis dignissimos laudantium consequuntur magnam corrupti similique quos!</div>
		<div>Porro quis repellendus magni quos eum similique accusantium earum. Dolorem veritatis quisquam earum omnis blanditiis sunt unde cupiditate quis quasi dicta enim eaque fugiat consequatur soluta neque obcaecati cum voluptates?</div></div>
		<div class="block">9. <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque vel ad ex repellendus et aliquam nesciunt. Quis iure delectus pariatur fuga sit. Nam minima enim ab quibusdam consequatur cupiditate!</div>
		<div>Illo ad ut eaque quam nisi officia vero aliquid molestias neque nihil at quaerat facere omnis similique illum iure earum dolore non soluta laborum eius est quasi ullam obcaecati expedita!</div>
		<div>Officia esse id. Illum omnis nemo fuga mollitia fugiat minima pariatur dolore explicabo dicta vel labore ratione repudiandae dolores hic iste! Eius rerum qui vero architecto dolorem. Ipsam vero dolorem.</div></div>
		<div class="block">10. <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae ea perspiciatis delectus architecto sunt eligendi numquam beatae rerum sint a ex fugiat eveniet tempore minus animi doloribus eos pariatur tempora.</div>
		<div>Placeat non corrupti aliquam consectetur quae fugit laborum quaerat? Corrupti dolor illum alias ullam laboriosam est optio sequi doloremque eum ex perferendis earum id libero tenetur ratione vero at eveniet!</div></div>
		<div class="block">11. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus quam sint eaque cumque sequi modi sit recusandae laboriosam necessitatibus similique non minus consectetur error nulla incidunt quasi iusto! Vitae tempora.</div>
		<div class="block">12. <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quo ipsa eaque omnis voluptate assumenda in commodi saepe quasi consequatur. Omnis tempore possimus animi aliquid voluptate sit similique commodi soluta.</div>
		<div>Dolorum laudantium commodi ut dolor in iure veniam veritatis itaque cupiditate velit dignissimos architecto provident nostrum. Dignissimos dolorem incidunt veniam ea modi earum similique est. Rerum animi accusantium similique asperiores.</div>
		<div>Voluptatem quidem blanditiis dolore delectus quos ut quibusdam reprehenderit natus fuga cupiditate beatae cumque distinctio qui eum necessitatibus minima exercitationem! Odit dolorum reprehenderit obcaecati expedita excepturi velit porro. Voluptatem laborum.</div></div>
		<div class="block">13. <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde quos nesciunt ipsa provident voluptatem iusto architecto dolores voluptatibus velit obcaecati. Rem cum voluptatum ipsa illo quae maiores praesentium odio accusantium.</div>
		<div>Necessitatibus culpa porro quisquam iure enim velit ullam illo et ad eveniet id repudiandae voluptates fuga. Amet deserunt distinctio dicta vero aut accusamus minima odio a possimus doloremque neque sit.</div></div>
		<div class="block">14. <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus praesentium quas similique provident dolore deleniti fugit ullam placeat excepturi vel odit nulla consequatur aperiam recusandae doloribus id voluptas. Omnis id.</div>
		<div>Atque ad quia illo tenetur iusto nam reprehenderit provident sint enim suscipit. Earum odit odio necessitatibus similique aliquam ipsum consectetur vel enim debitis iusto. Amet facere laudantium delectus necessitatibus nesciunt?</div>
		<div>Repudiandae eveniet quod aspernatur perferendis cum pariatur sed quis velit incidunt magnam ea nisi. Voluptas labore vitae inventore minus tenetur unde ipsam rem soluta numquam consectetur possimus maiores architecto id.</div></div>
		<div class="block">15. <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam saepe nemo quos eveniet sed odio labore quod excepturi sit voluptatem perferendis exercitationem magnam id. Ipsa ab cum animi perspiciatis illum.</div>
		<div>Quos dignissimos doloribus quia et blanditiis harum dolores qui ratione odio accusamus explicabo non asperiores magnam facere unde suscipit repudiandae nulla beatae accusantium est obcaecati ducimus delectus nemo excepturi reprehenderit!</div></div>
	</div>
	<script src="js/jquery-1.11.3.js"></script>
	<script src="js/masonry.pkgd.js"></script>
	<script>
		$(".block").each(function(){
			$(this).css("background",
				"rgb("+
				Math.floor(Math.random()*256)+","+
				Math.floor(Math.random()*256)+","+
				Math.floor(Math.random()*256)+")"
			);
		});
		$(".container").masonry();
	</script>
 </body>
</html>