サイズの違う写真を余白を揃えて並べ、遅延読み込みさせたいです。

html
1
2<!DOCTYPE html>
3<html lang="ja">
4
5<head>
6  <meta charset="UTF-8">
7  <meta name="viewport"
8    content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
9  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
10  <title></title>
11  <link rel="stylesheet" href="css/style.css">
12  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> <!-- フォントオーサム -->
13  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- ハンバーガークリックアニメ -->
14  <link rel="stylesheet"
15    href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@800&family=Noto+Serif+JP:wght@700&display=swap">
16  <!-- googleフォント -->
17  <link rel="icon" href="img/favicon.png"> <!-- ファビコン -->
18
19  <!-- fancybox -->
20  <!-- Add mousewheel plugin (オプションのマウスホイールプラグイン) -->
21  <script type="text/javascript" src="js/jquery.mousewheel.pack.js"></script>
22  <!-- fancyBox の読み込み（必須）-->
23  <link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" />
24  <script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
25  <!-- lazyload -->
26  <script src="js/lazysizes.min.js"></script>
27  <!-- javascript  -->
28  <script src="js/script.js"></script>
29</head>
30
31<body ontouchstart="">
32
33  <header id="top-head">
34    <div class="inner">
35      <div id="mobile-head">
36        <img class="topicon" src="img/topicon.jpg" alt="topicon">
37        <h1 class="logo"></h1>
38      </div>
39
40      <nav id="global-nav">
41        <ul>
42          <li><a href="https://" class="insta_btn" target="_blank"><span class="insta"><i
43                  class="fab fa-instagram"></i></span>instagram</a></li>
44          <li><a href="https://" class="twitter_btn" target="_blank"><span class="twitter"><i
45                  class="fab fa-twitter"></i></span>twitter</a></li>
46          <li><i class="fa fa-envelope fa-1x"><span class="e-mail"><a href="mailto:"
47                  class="mail_btn" title="Send me an email">e-mail</a></span></i></li>
48        </ul>
49      </nav>
50    </div>
51  </header>
52
53  <main>
54    <div id="loader-bg">
55      <div id="loader">
56        
57      </div>
58    </div>
59    <div id="wrap">
60      <div id="container">
61        <div class="wrapper">
62          <figure class="hover-parent">
63            <a href="img/2020-8-19-4.jpg" class="item x3" data-fancybox-group="cotoh"><img class="lazyload" data-src="img/2020-8-19-4.jpg">
64              <span class="hover-mask">2020-8-19</span></a>
65          </figure>
66          <figure class="hover-parent">
67            <a href="img/2020-8-19-3.jpg" class="item x3" data-fancybox-group="cotoh"><img class="lazyload" data-src="img/2020-8-19-3.jpg">
68              <span class="hover-mask">2020-8-19</span></a>
69          </figure>
70          <figure class="hover-parent">
71            <a href="img/2020-8-19-2.jpg" class="item x3" data-fancybox-group="cotoh"><img class="lazyload" data-src="img/2020-8-19-2.jpg">
72              <span class="hover-mask">2020-8-19</span></a>
73          </figure>
74
75  </div>
76
77
78  </main>
79
80  <footer class="footer">
81  </footer>
82
83  <!-- masonry -->
84  <script src="js/masonry.pkgd.min.js"></script>
85  <script src="js/imagesloaded.pkgd.min.js"></script>
86
87  <script>
88    $("img.lazyload").lazyload();
89  </script>
90
91</body>
92
93</html>

css
1
2@charset "UTF-8";
3
4html {
5  margin: 0;
6  padding:0;
7}
8img {
9  width: 100%;
10  vertical-align: middle; 
11}
12figure {
13  margin: 0;  
14}
15table {
16  border-collapse: collapse;
17  border-spacing: 0;
18}
19a { 
20  text-decoration: none;
21  /* transition: all 0.5s ease; 全てのプロパティ・変化までの時間・開始と終了時緩やかに */
22}
23a:hover { 
24  transition:all .5s ease;
25}
26section {
27  margin-bottom: 120px;
28}
29.content-wrapper {
30   width: 100%; /*修正前95*/
31   margin: 0 auto;
32   max-width: 1400px; /*これ以上大きくならない*/
33 }
34section h2 {
35  font-size: 2rem;
36}
37/* figcaption */
38.hover-parent {
39  position: relative;       
40  line-height: 30px;
41}
42.hover-parent:hover .hover-mask {
43  display: inline;                     /* インライン要素として表示 */
44}
45
46
47/* masonry */
48#container {
49  width: 100%;
50  margin: 0 auto;   /*中央寄せ */
51  position: relative;
52}
53.wrapper {
54  position: absolute;
55  top: 15px;
56  left: 60px;
57}
58.item {
59  margin-top:15px;
60  margin-bottom: 15px;
61  width: 100%;
62  padding: 8px;
63  box-shadow: 8px 8px 10px #555555;
64  /* float: left;  */
65}
66.item.x3 {
67  width: 400px;
68  opacity : 0;
69  transform: translate(0,50px);
70  transition: all 1s  1s ease-out;
71}
72.item img {
73  width: 100%;
74}
75

jQuery
1
2jQuery(function ($) {  //ロード時の崩れ対策
3  $('body').fadeIn(500)
4
5
6  // var min_width = 100;
7
8  //画面幅による分岐と imagesLoaded, Masonry のイニシャライズを関数化
9  function masonry_update() {
10    ww = $(window).width();
11    var cw = 90;
12    if (ww < 1025) { cw = 59; }  //幅により columnWidth を変更    
13    if (ww < 897) { cw = 53; }
14    if (ww < 835) { cw = 50; }
15    if (ww < 769) { cw = 36; }
16    if (ww < 737) { cw = 33; }
17    if (ww < 668) { cw = 31; }
18    if (ww < 415) { cw = 33; }
19    if (ww < 376) { cw = 30; }
20    var $works_list = $('#container');
21    $works_list.imagesLoaded(function () {
22      $works_list.masonry({
23        itemSelector: '.item',
24        isFitWidth: true,//親要素の幅に合わせてカラム数を自動調整
25        columnWidth: cw //写真のサイズ
26      });
27    });
28  }
29
30  masonry_update();
31
32  //リサイズ時の処理
33  var timer = false;
34  $(window).resize(function () {
35    if (timer !== false) {
36      clearTimeout(timer);
37    }
38    timer = setTimeout(function () {
39      masonry_update();
40    }, 200);
41  });
42});
43   
44
45
46$(function(){
47  $(window).on('load scroll', function() {
48     var winScroll = $(window).scrollTop();
49     var winHeight = $(window).height();
50     var scrollPos = winScroll + (winHeight * 0.8);
51
52     $(".item.x3").each(function() {
53        if($(this).offset().top < scrollPos  + 1000 ) {
54           $(this).css({opacity: 1, transform: 'translate(0, 0)'});
55        }
56     });
57  });
58});
59
60
61// fancybox
62//消すと連続で移動できない
63(function ($, F) {
64  F.transitions.resizeIn = function () {
65    var previous = F.previous,
66      current = F.current,
67      startPos = previous.wrap.stop(true).position(),
68      endPos = $.extend({ opacity: 1 }, current.pos);
69    startPos.width = previous.wrap.width();
70    startPos.height = previous.wrap.height();
71    previous.wrap.stop(true).trigger('onReset').remove();
72    delete endPos.position;
73    current.inner.hide();
74    current.wrap.css(startPos).animate(endPos, {
75      duration: current.nextSpeed,
76      easing: current.nextEasing,
77      step: F.transitions.step,
78      complete: function () {
79        F._afterZoomIn();
80        current.inner.fadeIn("fast");
81      }
82    });
83  };
84}(jQuery, jQuery.fancybox));
85// 消すと拡大後の移動できない
86jQuery(function ($) {
87  $(".item.x3").fancybox({
88    nextMethod: 'resizeIn',
89    nextSpeed: 250,
90    prevMethod: false
91  });
92});
93
94$('#container').imagesLoaded(function(){
95  /*実行させたい処理*/
96});
97
98$("img.item.x3").lazyload({
99  effect: 'fadeIn',
100  effectspeed: 1000,
101  threshold: 10
102});
103![イメージ説明](f785f988fc2da84cc587626849a44d9b.png)

サイズの違う写真を縦横比率を変えずに、横並び折返してレイアウトし、遅延読み込みを使用し、サクサク見れるギャラリーサイトを作りたいです。

試したこと

masonryを使用しイメージ通りのレイアウトは出来ましたが、遅延読み込みをさせようと、lazyloadやlazusizesを使用すると、写真が重なってしまいました。

masonryを使用せずに、CSSのみでレイアウトすれば、遅延読み込みはできるのですが、
flexで横並びにして折り返しすと、行が変わると上下に余白が入ってしまう。
columnで縦並びにして、wrapperの終わりで折り返すと、wrapperの境界で余白が入ってしまいます。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

kuma_kuma_

2020/09/23 16:36

jQueryプラグインのMasonryの事でしょうか？現在までに作成されたHTML,CSS,JSの内容およびjQuery,Masonryのバージョンの追記をお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

masonryのバージョンはv4.2.2になります。

masonryのv4.2.2が見つからなくってバージョンv3.0.4で作っています。
fancyboxはあえてv1.3.4です。(それ以上は商業利用できない為)
ソースを拝見したのですが、やりたい事とソースの内容が違うように見受けられた為

masonryを使用しイメージ通りのレイアウトは出来ましたが、遅延読み込みをさせようと、lazyloadや
lazusizesを使用すると、写真が重なってしまいました。
masonryを使用せずに、CSSのみでレイアウトすれば、遅延読み込みはできるのですが、
flexで横並びにして折り返しすと、行が変わると上下に余白が入ってしまう。
columnで縦並びにして、wrapperの終わりで折り返すと、wrapperの境界で余白が入ってしまいます。

この辺りを解釈してさらに縮小時に画像も縮小もしてほしいようでしたのでその形で修正しています。
意図がちがっていたらすみません。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport"
7    content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
8  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
9  <title>test</title>
10  <!-- googleフォント -->
11  <link rel="icon" href="img/favicon.png"> <!-- ファビコン -->
12
13  <link rel="stylesheet" href="css/style.css">
14  <link href="releases/v5.6.1/css/all.css" rel="stylesheet"> <!-- フォントオーサム -->
15  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@800&family=Noto+Serif+JP:wght@700&display=swap">
16  <link rel="stylesheet" type="text/css" href="/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css" media="screen">
17
18<script type="text/javascript" src="/ajax/libs/jquery/1.4/jquery.min.js"></script>
19<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>--> <!-- ハンバーガークリックアニメ -->
20<script type="text/javascript" src="/js/fancybox-1.3.4/jquery.easing-1.3.pack.js"></script>
21<script type="text/javascript" src="/js/fancybox-1.3.4/jquery.mousewheel-3.0.4.pack.js"></script>
22<script type="text/javascript" src="/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script>
23
24<!-- lazyload -->
25<script src="/lazysizes.min.js"></script>
26<!-- masonry -->
27<script src="/dist/masonry.pkgd.min.js"></script>
28<script src="/js/masonry-docs.min.js?2"></script>
29
30<!-- javascript  -->
31<script src="js/script.js"></script> 
32
33</head>
34
35<body ontouchstart="">
36
37<header id="top-head">
38	<div class="inner">
39		<div id="mobile-head">
40			<img class="topicon" src="img/topicon.jpg" alt="topicon">
41			<h1 class="logo">XXXXX</h1>
42		</div>
43
44		<nav id="global-nav">
45			<ul>
46				<li>
47					<a href="https://instagram.com/cotoh_tsumi" class="insta_btn" target="_blank">
48					<span class="insta">
49						<i class="fab fa-instagram"></i>
50					</span>instagram</a>
51				</li>
52				<li>
53					<a href="https://twitter.com/cotoh_tsumi" class="twitter_btn" target="_blank">
54					<span class="twitter">
55						<i class="fab fa-twitter"></i>
56					</span>twitter</a>
57				</li>
58				<li>
59					<i class="fa fa-envelope fa-1x">
60						<span class="e-mail"><a href="mailto:xxxxxxx@xxxxx.com" class="mail_btn" title="Send me an email">e-mail</a>
61						</span>
62					</i>
63				</li>
64			</ul>
65		</nav>
66	</div>
67</header>
68
69<main>
70	<div id="loader-bg">
71		<div id="loader">
72
73		</div>
74	</div>
75	<div id="wrap">
76		<div id="container">
77			<div class="wrapper">
78				<figure class="hover-parent">
79					<a href="pic01.png" class="item x3" data-fancybox-group="cotoh">
80						<img class="lazyload" data-src="pic01.png" src="pic01.png">
81						<span class="hover-mask">2020-8-19</span>
82					</a>
83				</figure>
84				<figure class="hover-parent">
85					<a href="pic02.png" class="item x3" data-fancybox-group="cotoh">
86						<img class="lazyload" data-src="pic02.png" src="pic02.png">
87						<span class="hover-mask">2020-8-19</span>
88					</a>
89				</figure>
90				<figure class="hover-parent">
91					<a href="pic03.png" class="item x3" data-fancybox-group="cotoh"><img class="lazyload" data-src="pic03.png" src="pic03.png">
92					<span class="hover-mask">2020-8-19</span></a>
93				</figure>
94			</div>
95		</div>
96	</div>
97</main>
98<footer class="footer">
99</footer>
100
101</body>
102
103</html>

CSS
1html {
2	margin: 0;
3	padding: 0;
4}
5body{
6	display:none;
7}
8img {
9	width: 100%;
10	vertical-align: middle; 
11}
12figure {
13	margin: 0;
14}
15table {
16	border-collapse: collapse;
17	border-spacing: 0;
18}
19a { 
20	text-decoration: none;
21	/* transition: all 0.5s ease; 全てのプロパティ・変化までの時間・開始と終了時緩やかに */
22}
23
24a:hover { 
25	transition:all .5s ease;
26}
27section {
28	margin-bottom: 120px;
29}
30.content-wrapper {
31	width: 100%; /* 修正前95 */
32	margin: 0 auto;
33	max-width: 1400px; /*これ以上大きくならない */
34}
35section h2 {
36	font-size: 2rem;
37}
38
39/* figcaption */
40.hover-parent:hover .hover-mask {
41	display: inline;                     /* インライン要素として表示 */
42}
43/* masonry */
44#container {
45	width: 100%;
46	margin: 0 auto;   /* 中央寄せ */
47	position: relative;
48    /* overflow: auto; ※ 消してください */
49}
50.wrapper {
51	position: absolute;
52	top: 15px;
53	/* left: 60px; 今回中央寄せにした為消してください */
54	width: 90%;	/* ※追加してください(中央寄せ) */
55	margin-left: auto;	/* ※追加してください(中央寄せ) */
56	margin-right: auto;	/* ※追加してください(中央寄せ) */
57}
58.hover-parent {
59	position: relative;
60	line-height: 30px;
61	min-width:50px;
62	max-width:400px;
63	width: 100%;	/* ※追加してください */
64}
65.item {
66	margin-top:15px;
67	margin-bottom: 15px;
68	padding: 8px;
69	box-shadow: 8px 8px 10px #555555;
70	visibility: hidden;	/* ※追加してください */
71}
72.item.x3 {
73	/* width: 400px; 指定方法の変更 */
74	width: 100%;
75	/* ※ 一応消しておきました */
76	/* opacity : 0; */
77	/* transform: translate(0,50px); */
78	/* transition: all 1s  1s ease-out; */
79}
80.item img {
81	width: 100%;
82}

追記
前回回答から変更してあります。
ブラウザ自体の画像遅延読み込みの影響で画像サイズが取得できませんでした。
(画像が多いと発生する)
~~これでIE,Firefox,Chromeは対応できたのですがEdge(Chrome系)だけ
なぜか他ページから移動してきた時表示が崩れる現象が発生しています。
(URL直打ち込みでは大丈夫)対策でき次第再アップします。　~~
対応しましたが、うちに旧Edgeがないのでそれだけ動作確認できていません。
あとFirefoxは一度表示してから別のページに移動「戻る」で再度ページを開くと
イベントが発生しないのでページのフェートインが動きません。
(回避ができない．．．)
あと全部windows版で確認しています。

追記2
Mac版で正常な動きができないとの事。
jQueryの"imagesLoaded"が正常に働かない為処理が動かず、
jQueryのバージョンを上げてもらうがやはり正常な動きができない模様
その為「遅延読み込み対策」の処理が正常に動かずビューが重なる現象が発生。
一応タイマーで表示遅延を試みました。しかし質問者様の意向もありここで終了とします。

ここからは今後読まれた向けの話です。
解決策は画像ファイルのタグによる先読みを実装するしかありませんが
その場合1からmasonryを作り直さないといけないので大変になります。
ただMacの場合jQueryでもイベントを拾い切れていないので
「先読み→サイズから読み込めたか判定」の流れが必要です。

いまさらですが

html
1<img class="lazyload" data-src="pic01.png" src="pic01.png">

masonryの機能に頼らずに初めからsrcで画像を読み込めば行けそうです。

javascript
1// itemのサイズを調整する
2function masonry_update(){
3	var ww = $(window).width();
4	var cw = 90;
5	//幅により columnWidth を変更 
6	if (ww < 1025) { cw = 59; }
7	if (ww < 897) { cw = 53; }
8	if (ww < 835) { cw = 50; }
9	if (ww < 769) { cw = 36; }
10	if (ww < 737) { cw = 33; }
11	if (ww < 668) { cw = 31; }
12	if (ww < 415) { cw = 33; }
13	if (ww < 376) { cw = 30; }
14	$('#container').masonry({
15		itemSelector: '.item',
16		isFitWidth: true,　
17		columnWidth: cw
18	});
19}
20// itemのサイズを調整する
21function image_show(){
22	// itemのサイズを調整する
23	masonry_update();
24
25	//この時点で画像サイズが判らないとレイアウトが崩れるため visibility: hidden; で処理を行う
26	$('[class*="item"]').each(function(){
27		//visibility: hidden; で表示していたのをdisplay: noneに変更し
28		//jQueryのフェードインで表示を行う。
29		$(this).css('visibility','visible');
30		$(this).css('display', 'none');
31		$(this).delay(500).fadeIn("slow");
32	});
33}
34
35$(function(){
36
37	var isBodyShow = false;
38	var isLoaded = false;
39
40	// HPの表示を緩やかにする。
41	$('body').delay(500).fadeIn("slow" ,function(){
42		isBodyShow = true;
43		if(isBodyShow == true && isLoaded == true){
44		 	masonry_update();
45			setTimeout("image_show();", 500);
46		}
47	});
48
49	// 画像読み込み完了時
50    $('#container').imagesLoaded(function (){
51		// 遅延読み込み対策
52		$('[class*="item"]').each(function(){
53			$('img',this).attr('src', $('img',this).attr('data-src'));
54		});
55    	isLoaded = true;
56		if(isBodyShow == true && isLoaded == true){
57		 	masonry_update();
58			setTimeout("image_show();", 500);
59		}
60    });
61
62	//リサイズ時の処理
63	$(window).resize(function timeout_masonry_update(){
64		masonry_update();
65	});
66
67
68	// ***** デバッグ用処理 開始 ***** 
69	// 画像サイズ確認用に変更しています
70	$('a[class*="item"]').attr('target','_blank');
71	// ***** デバッグ用処理 終了 ***** 
72
73});

投稿2020/09/24 22:54

編集2020/09/26 05:11

kuma_kuma_

総合スコア2506

コード修正ありがとうございました。
早速、下記コードの様に修正してみましたが、同じ様に画像が重なってしまいました。
masonryの同じバージョンが探せずに、4.2.2のままです。
お手数おかけしますが、ご教授願います。

html
1
2<!DOCTYPE html>
3<html lang="ja">
4
5<head>
6 <meta charset="UTF-8">
7 <meta name="viewport"
8   content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
9 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
10 <title>###</title>
11 <link rel="stylesheet" href="css/style.css">
12 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> <!-- フォントオーサム -->
13 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@800&family=Noto+Serif+JP:wght@700&display=swap">
14 <link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css" media="screen">
15 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
16<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>--> <!-- ハンバーガークリックアニメ -->
17<script type="text/javascript" src="js/jquery.easing-1.3.pack.js"></script>
18<script type="text/javascript" src="js/jquery.mousewheel-3.0.4.pack.js"></script>
19<script type="text/javascript" src="js/jquery.fancybox-1.3.4.js"></script>
20
21<!-- lazyload -->
22<script src="js/lazysizes.min.js"></script>
23<!-- masonry -->
24<script src="js/masonry.pkgd.min.js"></script>
25<script src="js/masonry-docs.min.js"></script>
26<!-- javascript  -->
27<script src="js/script.js"></script> 
28</head>
29
30<body ontouchstart="">
31
32 <header id="top-head">
33 </header>
34
35 <main>
36   <div id="wrap">
37     <div id="container">
38       <div class="wrapper">
39         <figure class="hover-parent">
40           <a href="img/2020-8-19-4.jpg" class="item x3" data-fancybox-group="cotoh"><img class="lazyload" data-src="img/2020-8-19-4.jpg">
41             <span class="hover-mask">2020-8-19</span></a>
42         </figure>
43         <figure class="hover-parent">
44           <a href="img/2020-8-19-3.jpg" class="item x3" data-fancybox-group="cotoh"><img class="lazyload" data-src="img/2020-8-19-3.jpg">
45             <span class="hover-mask">2020-8-19</span></a>
46         </figure>
47</div>
48     </div>
49   </div>
50 </main>
51
52 <footer class="footer"> 
53 </footer>
54
55 <div id="pagetop"><a href="#"></a></div>
56 <script src="js/imagesloaded.pkgd.min.js"></script>
57</body>
58
59</html>

css
1/* masonry */
2#container {
3  width: 100%;
4  margin: 0 auto;   /* 中央寄せ */
5  position: relative;
6  /* overflow: auto; ※ 消してください */
7}
8.wrapper {
9  position: absolute;
10  top: 15px;
11  /* left: 60px; 今回中央寄せにした為消してください */
12  width: 90%;    /* ※追加してください(中央寄せ) */
13  margin-left: auto;    /* ※追加してください(中央寄せ) */
14  margin-right: auto;    /* ※追加してください(中央寄せ) */
15}
16.hover-parent {
17  position: relative;
18  line-height: 30px;
19  min-width:50px;
20  max-width:400px;
21  width: 100%;    /* ※追加してください */
22}
23.item {
24  margin-top:15px;
25  margin-bottom: 15px;
26  padding: 8px;
27  box-shadow: 8px 8px 10px #555555;
28  visibility: hidden;    /* ※追加してください */
29}
30.item.x3 {
31  /* width: 400px; 指定方法の変更 */
32  width: 100%;
33  /* ※ 一応消しておきました */
34  /* opacity : 0; */
35  /* transform: translate(0,50px); */
36  /* transition: all 1s  1s ease-out; */
37}
38.item img {
39  width: 100%;
40}

jQuery
1$(function(){
2  var min_width = 100;
3
4  // itemのサイズを調整する
5  function masonry_update(){
6      ww = $(window).width();
7      var cw = 90;
8      //幅により columnWidth を変更 
9      if (ww < 1025) { cw = 59; }
10      if (ww < 897) { cw = 53; }
11      if (ww < 835) { cw = 50; }
12      if (ww < 769) { cw = 36; }
13      if (ww < 737) { cw = 33; }
14      if (ww < 668) { cw = 31; }
15      if (ww < 415) { cw = 33; }
16      if (ww < 376) { cw = 30; }
17      $('#container').masonry({
18          itemSelector: '.item.x3',
19          isFitWidth: true,
20          columnWidth: cw
21      });
22  }
23
24  // HPの表示を緩やかにする。
25  $('body').delay(500).fadeIn("slow" ,function(){
26      // 画像の枠をレイアウト
27      //この時点で画像サイズが判らないとレイアウトが崩れるため visibility: hidden; で処理を行う
28      masonry_update();
29      $('[class*="item"]').each(function(){
30          //visibility: hidden; で表示していたのをdisplay: noneに変更し
31          //jQueryのフェードインで表示を行う。
32          $(this).css('visibility','visible');
33          $(this).css('display', 'none');
34          $(this).delay(500).fadeIn("slow");
35      });
36  });
37
38  //リサイズ時の処理
39  var timer = false;
40  $(window).resize(function timeout_masonry_update(){
41      if (timer !== false) {
42          clearTimeout(timer);
43      }
44      timer = setTimeout(function () {
45          masonry_update();
46      }, 200);
47  });
48
49
50  // ***** デバッグ用処理 開始 ***** 
51  // 画像サイズ確認用に変更しています消してください
52  $('a[class*="item"]').attr('target','_blank');
53  // ***** デバッグ用処理 終了 ***** 
54});
55   
56/* ここから下は元からあったソースなのですがJQueryの拡張機能を利用して画像表示を行おうとした様子 今回処理を判りやすくするために外してあります。
57もし使われる場合は「$(this).delay(500).fadeIn("slow");」の箇所で対応してください。
58　*/
59
60

imagesloaded.pkgd.min.js:7 Uncaught TypeError: h.Deferred is not a constructor
    at new o (imagesloaded.pkgd.min.js:7)
    at init.h.fn.imagesLoaded (imagesloaded.pkgd.min.js:7)
    at HTMLDocument.<anonymous> (script.js:55)
    at Function.ready (jquery.min.js:29)
    at HTMLDocument.u (jquery.min.js:37)

imagesloaded.pkgd.min.js:7 Uncaught TypeError: h.Deferred is not a constructor
at new o (imagesloaded.pkgd.min.js:7)
at init.h.fn.imagesLoaded (imagesloaded.pkgd.min.js:7)
at HTMLDocument.<anonymous> (script.js:66)
at Function.ready (jquery.min.js:29)
at HTMLDocument.u (jquery.min.js:37)
script.js:49 body.slow:step1
script.js:51 body.slow:step2

投稿2020/09/24 11:51

編集2020/09/26 02:31

masa_air511211

総合スコア1

kuma_kuma_

2020/09/25 15:50 編集

この場合「質問」の編集でなおしてください。

kuma_kuma_

2020/09/25 16:35

思っていた以上に画像があるのですね．．．フェードイン等を使っている関係で画像サイズ取得のタイミングが難しい状態です。再調整してみます。

masa_air511211

2020/09/26 00:28

修正ありがとうございました。修正して頂いた、HPの表示を緩やかにする。部分を差し替えると、body部分が表示されなくなってしまいました。それ以外の部分を差し替えた状態では表示されますが、画像の重なりは改善されませんでした。当方、MACですが関係があったりしますでしょうか？宜しくお願い致します。

kuma_kuma_

2020/09/26 00:38

処理がだいぶ変わっていますので、JQuery(Javascript)の部分は全部変えて下さい。 > body部分が表示されなく多分入れ替えがうまくいってなくてエラーになっているのかもしれません。

masa_air511211

2020/09/26 01:13

すいません、それが、全部差し替えた所、添付の写真の様に、header footerは表示されるのですが、body部分が表示されなくなってしまいまして、どこが効いているか調べた所、HPの表示を〜という部分でした・・・特に、masonryにこだわりはないので、他の方法でも結構です。何百枚にもなるサイズの違う写真を、均等余白で表示させて、遅延読み込みさえできれば、他のjQueryでもcssのみのやり方でも結構です。お手数おかけしますが、宜しくお願い致します。

kuma_kuma_

2020/09/26 01:21

?前のコードで動いていたんですよね？動作確認はMacのchromeでしょうか？「option + command + i」でデベロッパーツールを表示していただいて Consoleタグを選択してもらえばエラーの内容が判ります（たぶん赤字で表示されます。）それをコピペしてもらえますか？ > 何百枚にもなるサイズの違う写真を、均等余白で表示させて、遅延読み込みさえできれば、 > 他のjQueryでもcssのみのやり方でも結構です。いやそうすると、ここのサイト利用規約に抵触します。今でさえもギリギリの所ですので．．．

masa_air511211

2020/09/26 01:30

エラーコード追記させて頂きました。初めて利用させて頂いておりますが、利用規約に抵触とは、どの部分が当たるのでしょうか？お手数おかけしますが、ご教授頂けると甚大です。

kuma_kuma_

2020/09/26 01:37

> エラーコード見たんですが特別なエラーが発生しているわけではないようです。 > 利用規約に抵触低評価する時にあるんですが、内容的に「やってほしいことだけを記載した丸投げの質問」に該当します。 (「質問」ではなく「作成依頼」になる) ちょっと考えてみます。

masa_air511211

2020/09/26 01:43

なるほどです。理解いたしました。宜しくお願い致します。

kuma_kuma_

2020/09/26 01:52

すみませんソースにデバック表示させるように書き換えてみました。お手数ですが再度ソースを入れ変えてもらって実行後デベロッパーツールを表示して出力されている文字をコピペしてもらえますか？ (今度は黒い文字で表示があるはずです。)

masa_air511211

2020/09/26 02:11

メッセージ追記しました。ちなみに、状況に変化はありません。宜しくお願い致します。

kuma_kuma_

2020/09/26 02:15

たびたびで申し訳ありません。多分ですが原因がわかりましたので対策してみました。試してみて下さい。

masa_air511211

2020/09/26 02:30

ありがとうございます。表示はされる様になりましたが、画像の重なりは改善されませんでした。参考になるか分かりませんが、consoleの表示添付させて頂きます。

kuma_kuma_

2020/09/26 02:39

> 画像の重なりは改善されませんでした。やはりそうですか．．．今回大量の画像データがあるので「読み込みが完了するまで待機」してもらうように処理を追加したんですがMacだとそのイベントが取れていないようです。 jqueryのバージョンを上げれば大丈夫かもしれませんが上げる事は可能ですか？ (他にjqueryの処理がある場合や旧ブラウザ(IE6等)に対応しなくなります。)

masa_air511211

2020/09/26 03:00

ありがとうございます。やってみます。

kuma_kuma_

2020/09/26 03:06

変更箇所 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  ※数字が「3.5.1」に変わっています。 ※ソースはひとつ前の状態に更新しておきます。

masa_air511211

2020/09/26 03:53

ありがとうございます。重なっていない部分は、かなり増えましたが、スクロールして行くと重なり始めてしまいます。また、遅延読込が出来なくなってしまいました。これ以上は、規約に抵触しそうですので、違う方法を試してみます。何かいい方法が見つかればお知らせ頂ければ、すごく喜びます。迅速かつ丁寧な回答ありがとうございました。

kuma_kuma_

2020/09/26 04:05

判りました。今の状態はデバック版なので正規の状態に戻しておきます。お役にたてず申し訳ございません。

kuma_kuma_

2020/09/26 04:31

ソースを正規版に戻しておきました。(一応対策版) 画像をこの様に扱う処理は他に聞かないのですが、もしあったとしても同じ問題にあたると思います。ここでは趣旨が変わってしまうのでお答えできませんが CSSの処理なら同じような事ができるはずです。 (といってもだいぶ調整が必要ですが．．．) ご連絡は前タイトルに書かれていた名前のTwitterでよろしいでしょうか？

masa_air511211

2020/09/26 06:18

はい、そうです。宜しくお願いいたします。

行動規範の内容に同意します

あなたの回答